1175 lines
52 KiB
HTML
1175 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>مستند جامع محصول xKanban | تحلیل مسئله، مزایا، معماری و مخاطبان هدف</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
|
||
:root {
|
||
--primary: #1a365d;
|
||
--primary-light: #2c5282;
|
||
--accent: #c9a961;
|
||
--accent-dark: #a8893f;
|
||
--bg: #faf9f6;
|
||
--card-bg: #ffffff;
|
||
--text: #1a202c;
|
||
--text-muted: #4a5568;
|
||
--border: #e2e8f0;
|
||
--success: #38a169;
|
||
--danger: #e53e3e;
|
||
--warning: #dd6b20;
|
||
--shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 30px rgba(26,54,93,0.08);
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: 'Vazirmatn', Tahoma, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.9;
|
||
font-size: 15px;
|
||
padding: 30px 15px;
|
||
}
|
||
.document-container {
|
||
max-width: 950px;
|
||
margin: 0 auto;
|
||
background: var(--card-bg);
|
||
box-shadow: var(--shadow);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.document-header {
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
||
color: white;
|
||
padding: 50px 40px 40px;
|
||
position: relative;
|
||
border-bottom: 4px solid var(--accent);
|
||
}
|
||
.document-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; right: 0;
|
||
width: 200px; height: 200px;
|
||
background: radial-gradient(circle, rgba(201,169,97,0.15) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
transform: translate(50%, -50%);
|
||
}
|
||
.header-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.company-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.company-logo {
|
||
width: 60px; height: 60px;
|
||
background: var(--accent);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
}
|
||
.doc-meta {
|
||
text-align: left;
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
.doc-meta div { margin-bottom: 3px; }
|
||
.document-title {
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 20px 0;
|
||
}
|
||
.document-title .label {
|
||
display: inline-block;
|
||
background: rgba(201,169,97,0.2);
|
||
color: var(--accent);
|
||
padding: 4px 16px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
border: 1px solid rgba(201,169,97,0.4);
|
||
}
|
||
.document-title h1 {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
margin-bottom: 10px;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
.document-title h2 {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
opacity: 0.9;
|
||
}
|
||
.document-body {
|
||
padding: 40px;
|
||
}
|
||
.intro-text {
|
||
background: linear-gradient(to left, #f7fafc, #edf2f7);
|
||
border-right: 4px solid var(--accent);
|
||
padding: 20px 25px;
|
||
border-radius: 8px;
|
||
margin-bottom: 35px;
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
}
|
||
.section {
|
||
margin-bottom: 40px;
|
||
page-break-inside: avoid;
|
||
}
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid var(--border);
|
||
margin-bottom: 20px;
|
||
}
|
||
.section-number {
|
||
width: 50px; height: 50px;
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 4px 10px rgba(26,54,93,0.2);
|
||
}
|
||
.section-title { flex: 1; }
|
||
.section-title h3 {
|
||
font-size: 19px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 2px;
|
||
}
|
||
.section-title .subtitle {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.section-content {
|
||
padding-right: 10px;
|
||
}
|
||
.section-content p {
|
||
margin-bottom: 12px;
|
||
text-align: justify;
|
||
text-indent: 20px;
|
||
}
|
||
.section-content p.no-indent { text-indent: 0; }
|
||
.highlight-box {
|
||
background: linear-gradient(to left, #fffaf0, #fef5e7);
|
||
border: 1px solid #f6e05e;
|
||
border-right: 4px solid var(--accent);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.highlight-box strong { color: var(--accent-dark); }
|
||
.info-box {
|
||
background: linear-gradient(to left, #ebf8ff, #e6f6ff);
|
||
border: 1px solid #90cdf4;
|
||
border-right: 4px solid var(--primary-light);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.success-box {
|
||
background: linear-gradient(to left, #f0fff4, #e6fffa);
|
||
border: 1px solid #9ae6b4;
|
||
border-right: 4px solid var(--success);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.warning-box {
|
||
background: linear-gradient(to left, #fffaf0, #fef5e7);
|
||
border: 1px solid #fbd38d;
|
||
border-right: 4px solid var(--warning);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
.code-box {
|
||
background: #1a202c;
|
||
color: #e2e8f0;
|
||
border-right: 4px solid var(--accent);
|
||
padding: 18px 22px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
font-size: 13px;
|
||
font-family: 'Consolas', 'Courier New', monospace;
|
||
direction: ltr;
|
||
text-align: left;
|
||
overflow-x: auto;
|
||
line-height: 1.7;
|
||
}
|
||
.code-box .key { color: #c9a961; }
|
||
.code-box .str { color: #68d391; }
|
||
.code-box .num { color: #63b3ed; }
|
||
.code-box .comment { color: #718096; font-style: italic; }
|
||
.styled-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
.styled-table thead {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
}
|
||
.styled-table th {
|
||
padding: 14px 16px;
|
||
text-align: right;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
.styled-table td {
|
||
padding: 13px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 13px;
|
||
}
|
||
.styled-table tbody tr:last-child td { border-bottom: none; }
|
||
.styled-table tbody tr:nth-child(even) { background: #f8fafc; }
|
||
.styled-table .highlight-row {
|
||
background: #fffaf0 !important;
|
||
font-weight: 600;
|
||
}
|
||
.comparison-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin: 25px 0;
|
||
}
|
||
.comparison-card {
|
||
background: #f8fafc;
|
||
border: 2px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
position: relative;
|
||
}
|
||
.comparison-card.recommended {
|
||
border-color: var(--success);
|
||
background: linear-gradient(to left, #f0fff4, #e6fffa);
|
||
}
|
||
.comparison-card .card-badge {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 20px;
|
||
background: var(--success);
|
||
color: white;
|
||
padding: 3px 12px;
|
||
border-radius: 15px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
.comparison-card h4 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid var(--border);
|
||
}
|
||
.comparison-card.recommended h4 { border-bottom-color: var(--success); }
|
||
.comparison-card ul { list-style: none; padding: 0; }
|
||
.comparison-card ul li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 13px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.comparison-card ul li:last-child { border-bottom: none; }
|
||
.comparison-card ul li .value { font-weight: 600; color: var(--primary); }
|
||
.quote-box {
|
||
background: linear-gradient(135deg, #f7fafc, #edf2f7);
|
||
border-right: 4px solid var(--accent);
|
||
padding: 20px 25px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
position: relative;
|
||
}
|
||
.quote-box::before {
|
||
content: '"';
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 15px;
|
||
font-size: 60px;
|
||
color: var(--accent);
|
||
opacity: 0.3;
|
||
font-family: Georgia, serif;
|
||
}
|
||
.quote-box p {
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
text-indent: 0 !important;
|
||
}
|
||
.quote-box .source {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 15px;
|
||
margin: 25px 0;
|
||
}
|
||
.stat-card {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
box-shadow: 0 4px 12px rgba(26,54,93,0.2);
|
||
}
|
||
.stat-card .stat-value {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
margin-bottom: 5px;
|
||
color: var(--accent);
|
||
line-height: 1.3;
|
||
}
|
||
.stat-card .stat-label {
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
margin: 25px 0;
|
||
}
|
||
.feature-card {
|
||
background: #f8fafc;
|
||
border: 1px solid var(--border);
|
||
border-right: 4px solid var(--primary-light);
|
||
padding: 18px;
|
||
border-radius: 8px;
|
||
}
|
||
.feature-card .feature-icon {
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.feature-card h5 {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.feature-card p {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
text-indent: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
.architecture-diagram {
|
||
background: linear-gradient(to left, #f7fafc, #edf2f7);
|
||
border: 2px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 25px;
|
||
margin: 25px 0;
|
||
text-align: center;
|
||
}
|
||
.arch-layer {
|
||
background: white;
|
||
border: 2px solid var(--primary-light);
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin: 10px auto;
|
||
max-width: 700px;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||
}
|
||
.arch-layer-title {
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
border-bottom: 2px solid var(--accent);
|
||
padding-bottom: 5px;
|
||
display: inline-block;
|
||
}
|
||
.arch-components {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
}
|
||
.arch-chip {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
padding: 6px 14px;
|
||
border-radius: 15px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
.arch-arrow {
|
||
text-align: center;
|
||
font-size: 24px;
|
||
color: var(--accent);
|
||
margin: 5px 0;
|
||
}
|
||
.conclusion-box {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
color: white;
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
margin: 30px 0;
|
||
text-align: center;
|
||
box-shadow: 0 8px 20px rgba(26,54,93,0.3);
|
||
}
|
||
.conclusion-box h3 {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
margin-bottom: 15px;
|
||
color: var(--accent);
|
||
}
|
||
.conclusion-box p {
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
text-indent: 0 !important;
|
||
margin-bottom: 15px;
|
||
}
|
||
.conclusion-box .highlight {
|
||
background: rgba(201,169,97,0.2);
|
||
padding: 15px 20px;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
border: 1px solid rgba(201,169,97,0.4);
|
||
}
|
||
.document-footer {
|
||
background: var(--primary);
|
||
color: white;
|
||
padding: 25px 40px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
margin-top: 40px;
|
||
}
|
||
.document-footer .footer-brand {
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
}
|
||
.footer-divider {
|
||
width: 60px;
|
||
height: 2px;
|
||
background: var(--accent);
|
||
margin: 10px auto;
|
||
}
|
||
.page-info {
|
||
text-align: center;
|
||
padding: 15px;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 30px;
|
||
}
|
||
@media print {
|
||
body { background: white; padding: 0; }
|
||
.document-container { box-shadow: none; border-radius: 0; }
|
||
.section { page-break-inside: avoid; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.document-body { padding: 25px 20px; }
|
||
.document-header { padding: 30px 20px; }
|
||
.comparison-grid { grid-template-columns: 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr; }
|
||
.feature-grid { grid-template-columns: 1fr; }
|
||
.header-top { flex-direction: column; gap: 15px; }
|
||
.doc-meta { text-align: center; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="document-container">
|
||
<header class="document-header">
|
||
<div class="header-top">
|
||
<div class="company-badge">
|
||
<div class="company-logo"></div>
|
||
</div>
|
||
<div class="doc-meta">
|
||
<div>شماره مستند: PROD-XKN-1405-002</div>
|
||
<div>نسخه: ۱.۰.۰</div>
|
||
<div>تاریخ تهیه: یکشنبه ۲۲ شهریور ۱۴۰۵ (۱۳ سپتامبر ۲۰۲۶)</div>
|
||
<div>ساعت: ۱۱:۳۰</div>
|
||
<div>طبقهبندی: داخلی - محصولی</div>
|
||
</div>
|
||
</div>
|
||
<div class="document-title">
|
||
<span class="label">PRODUCT DOCUMENTATION</span>
|
||
<h1>مستند جامع محصول xKanban</h1>
|
||
<h2>تحلیل مسئله، مزایا، ارزشهای سازمانی، معماری فنی و مخاطبان هدف</h2>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="document-body">
|
||
<div class="intro-text">
|
||
<strong>تهیهکننده:</strong> هادی خزاعی اصل | معمار و توسعهدهنده ارشد نرمافزار<br>
|
||
<strong>مخاطبان مستند:</strong> مدیران فنی، تصمیمگیرندگان سازمانی، رهبران تیم و معماران نرمافزار<br>
|
||
این مستند با هدف ارائه تصویری جامع از چرایی خلق محصول <strong>xKanban</strong>، مزایای رقابتی آن، ارزشهای قابلخلق در سازمان، معماری فنی دقیق و شناسایی مخاطبان هدف تهیه شده است.
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<!-- بخش ۱: شرح مسئله -->
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۱</div>
|
||
<div class="section-title">
|
||
<h3>شرح مسئله و ضرورت خلق ابزار</h3>
|
||
<div class="subtitle">Problem Statement & Motivation</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>در دنیای توسعه نرمافزار و مدیریت پروژه، تیمها با چالشهای مشترکی در زمینه پیگیری وظایف، شفافیت وضعیت کارها و هماهنگی بین اعضا مواجه هستند. این چالشها مختص سازمان خاصی نیستند، بلکه الگویی تکرارشونده در سراسر صنعت محسوب میشوند.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">معضلات رایج در مدیریت وظایف:</h4>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠️ وابستگی اجباری به زیرساخت سرور:</strong>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;">بخش عمدهای از ابزارهای مدیریت پروژه، نیازمند راهاندازی سرور، پایگاه داده، پیکربندی شبکه و نگهداری مداوم هستند</li>
|
||
<li style="margin-bottom: 8px;">تیمهای کوچک و فریلنسرها اغلب فاقد زیرساخت و دانش فنی لازم برای استقرار این ابزارها هستند</li>
|
||
<li style="margin-bottom: 8px;">هزینههای سرور و نگهداری، بار مالی اضافی بر پروژههای کوچک تحمیل میکند</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠️ قفلشدگی در اکوسیستم ابری:</strong>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;">ابزارهای SaaS، دادههای سازمان را روی سرورهای شخص ثالث ذخیره میکنند که نگرانیهای امنیتی و حریم خصوصی ایجاد میکند</li>
|
||
<li style="margin-bottom: 8px;">وابستگی به اتصال اینترنت پایدار، کار در محیطهای آفلاین یا با پهنای باند محدود را غیرممکن میسازد</li>
|
||
<li style="margin-bottom: 8px;">تغییر قیمتگذاری یا تعطیلی سرویسدهنده، ریسک از دست رفتن دادهها را به همراه دارد</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠️ پیچیدگی بیش از حد ابزارهای موجود:</strong>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;">بسیاری از ابزارها با انبوهی از ویژگیهای غیرضروری، منحنی یادگیری بالایی دارند</li>
|
||
<li style="margin-bottom: 8px;">تیمها زمان قابلتوجهی را صرف یادگیری ابزار میکنند به جای تمرکز بر کار اصلی</li>
|
||
<li style="margin-bottom: 8px;">سفارشیسازی فرآیندها اغلب نیازمند پیکربندیهای پیچیده و دانش تخصصی است</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="warning-box">
|
||
<strong>⚠️ عدم قابلیت حمل و انتقال دادهها:</strong>
|
||
<ul style="padding-right: 20px; margin-top: 10px;">
|
||
<li style="margin-bottom: 8px;">خروجی گرفتن از دادهها و انتقال آنها بین ابزارها، فرآیندی دشوار و زمانبر است</li>
|
||
<li style="margin-bottom: 8px;">فرمتهای اختصاصی، امکان استفاده آفلاین یا اشتراکگذاری ساده پروژه را محدود میکنند</li>
|
||
<li style="margin-bottom: 8px;">عدم امکان آرشیو کردن پروژه به صورت فایل مستقل، مدیریت بلندمدت را مختل میکند</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="highlight-box">
|
||
<strong>🎯 نتیجهگیری از تحلیل مسئله:</strong> نیاز به ابزاری احساس میشد که بدون نیاز به سرور، بدون وابستگی به اینترنت، بدون پیچیدگی غیرضروری و با قابلیت حمل کامل، امکان مدیریت حرفهای پروژهها را بر اساس متدولوژی کانبان فراهم آورد. <strong>xKanban</strong> پاسخی مستقیم به این نیاز است.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<!-- بخش ۲: مزایای کلیدی محصول -->
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۲</div>
|
||
<div class="section-title">
|
||
<h3>مزایای کلیدی محصول</h3>
|
||
<div class="subtitle">Key Product Advantages</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>xKanban با رویکردی متفاوت از ابزارهای رایج بازار طراحی شده و مزایایی را ارائه میدهد که هر یک به تنهایی میتواند دلیلی قانعکننده برای انتخاب این ابزار باشد:</p>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-value">صفر<br>سرور</div>
|
||
<div class="stat-label">بدون نیاز به هیچ زیرساخت سروری</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">یک<br>فایل</div>
|
||
<div class="stat-label">توزیع و اجرا با یک فایل HTML</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">۱۰۰٪<br>آفلاین</div>
|
||
<div class="stat-label">کارکرد کامل بدون اتصال اینترنت</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">مزیت ۱: استقلال مطلق از زیرساخت</h4>
|
||
<p class="no-indent">xKanban به صورت کامل در مرورگر کاربر اجرا میشود. هیچ سروری نیاز نیست، هیچ پایگاه دادهای پیکربندی نمیشود، هیچ وابستگی به سرویس خارجی وجود ندارد. کاربر فقط یک فایل HTML را باز میکند و بلافاصله شروع به کار میکند. این یعنی <strong>زمان راهاندازی: صفر ثانیه</strong>.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">مزیت ۲: مالکیت کامل دادهها</h4>
|
||
<p class="no-indent">تمامی دادهها در مرورگر محلی کاربر و در فایلهای JSON خروجی ذخیره میشوند. هیچ بایتی از اطلاعات پروژه به سرور خارجی ارسال نمیشود. این ویژگی برای سازمانهایی که با دادههای حساس کار میکنند، یک مزیت حیاتی و غیرقابلمذاکره است.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">مزیت ۳: قابلیت حمل بینظیر</h4>
|
||
<p class="no-indent">کل پروژه شامل بردها، ستونها، کارتها، تگها و تنظیمات در یک فایل JSON قابلصدور است. این فایل را میتوان از طریق ایمیل ارسال کرد، روی فلش ذخیره کرد، در فضای ابری شخصی نگه داشت یا حتی پرینت گرفت. پروژه شما، همیشه در جیب شماست.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">مزیت ۴: غنای عملکردی در عین سادگی</h4>
|
||
<p class="no-indent">برخلاف تصور رایج که ابزارهای ساده فاقد قابلیتهای پیشرفته هستند، xKanban مجموعهای غنی از ویژگیها را ارائه میدهد:</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h5>بردهای چندگانه</h5>
|
||
<p>مدیریت همزمان چندین برد مستقل در یک پروژه با جابجایی آنی</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎨</div>
|
||
<h5>شخصیسازی بصری کامل</h5>
|
||
<p>رنگبندی مستقل برای بردها، ستونها و کارتها جهت شناسایی سریع</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">👥</div>
|
||
<h5>تخصیص چندمسئوله</h5>
|
||
<p>امکان اختصاص چندین نفر به هر کارت برای کارهای تیمی</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔗</div>
|
||
<h5>مدیریت وابستگیها</h5>
|
||
<p>تعریف روابط پیشنیازی بین کارتها برای درک زنجیره کار</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">✅</div>
|
||
<h5>چکلیست ریزوظایف</h5>
|
||
<p>شکستن کارتها به وظایف کوچکتر با قابلیت پیگیری پیشرفت</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📜</div>
|
||
<h5>تاریخچه جابجایی</h5>
|
||
<p>ثبت خودکار تمام جابجاییهای کارت بین ستونها با زمان دقیق</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📡</div>
|
||
<h5>یکپارچگی Webhook</h5>
|
||
<p>ارسال رویدادها به سیستمهای خارجی با ساختار استاندارد JSON</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⌨️</div>
|
||
<h5>میانبرهای کیبورد</h5>
|
||
<p>پشتیبانی کامل از کیبورد برای کاربران حرفهای و افزایش سرعت</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">مزیت ۵: خروجی چندفرمتی</h4>
|
||
<p class="no-indent">xKanban علاوه بر فرمت JSON برای پشتیبانگیری کامل، امکان خروجی گرفتن به فرمتهای <strong>Markdown</strong> و <strong>CSV</strong> را نیز فراهم میآورد. این یعنی دادههای شما هرگز در یک فرمت اختصاصی قفل نمیشوند و همیشه قابل استفاده در ابزارهای دیگر هستند.</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">مزیت ۶: بازیابی خودکار هوشمند</h4>
|
||
<p class="no-indent">سیستم AutoSave به صورت خودکار تغییرات را در مرورگر ذخیره میکند. در صورت بسته شدن ناگهانی مرورگر یا قطع برق، در جلسه بعدی سیستم به صورت خودکار دادههای ذخیرهشده را شناسایی کرده و گزینه بازیابی را ارائه میدهد.</p>
|
||
|
||
<div class="success-box">
|
||
<strong>✨ مزیت رقابتی نهایی:</strong> xKanban تنها ابزاری است که همزمان تمامی ویژگیهای «بدون سرور»، «آفلاین کامل»، «مالکیت داده»، «قابلیت حمل»، «غنای عملکردی» و «خروجی چندفرمتی» را در یک بسته واحد ارائه میدهد. هیچ ابزار دیگری در بازار این ترکیب منحصربهفرد را فراهم نمیآورد.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<!-- بخش ۳: ارزشهای سازمانی -->
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۳</div>
|
||
<div class="section-title">
|
||
<h3>ارزشهای قابلخلق در سازمان</h3>
|
||
<div class="subtitle">Organizational Value Proposition</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>استفاده از xKanban فراتر از یک ابزار مدیریت وظایف ساده است. این محصول میتواند ارزشهای استراتژیک و عملیاتی ملموسی را در سازمان ایجاد کند:</p>
|
||
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>حوزه ارزش</th>
|
||
<th>ارزش ایجادشده</th>
|
||
<th>تأثیر عملی</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>💰 کاهش هزینهها</strong></td>
|
||
<td>حذف هزینه لایسنس ابزارهای SaaS، سرور، پایگاه داده و نگهداری</td>
|
||
<td>صرفهجویی سالانه قابلتوجه در بودجه فناوری اطلاعات</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>⚡ افزایش سرعت</strong></td>
|
||
<td>راهاندازی آنی بدون فرآیند خرید، نصب و پیکربندی</td>
|
||
<td>تیمها در کمتر از یک دقیقه شروع به کار میکنند</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>🔒 امنیت دادهها</strong></td>
|
||
<td>عدم خروج دادهها از محیط محلی سازمان</td>
|
||
<td>انطباق با الزامات حریم خصوصی و مقررات حفاظت از داده</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>🔄 تداوم کسبوکار</strong></td>
|
||
<td>کارکرد مستقل از اینترنت و سرویسهای خارجی</td>
|
||
<td>عدم توقف کار تیم در صورت قطعی اینترنت یا اختلال سرویس</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>📈 شفافیت فرآیندها</strong></td>
|
||
<td>دید بلادرنگ به وضعیت تمام کارها و گلوگاهها</td>
|
||
<td>تصمیمگیری مبتنی بر داده و شناسایی سریع موانع</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>🤝 بهبود همکاری تیمی</strong></td>
|
||
<td>اشتراکگذاری آسان پروژه از طریق فایل JSON</td>
|
||
<td>هماهنگی بهتر بین اعضا حتی در محیطهای توزیعشده</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>📚 انباشت دانش</strong></td>
|
||
<td>تاریخچه کامل جابجاییها و آرشیو پروژهها</td>
|
||
<td>امکان بازنگری فرآیندها و یادگیری از تجربیات گذشته</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>🎯 استانداردسازی</strong></td>
|
||
<td>اجرای دقیق متدولوژی کانبان با ساختار یکپارچه</td>
|
||
<td>ایجاد زبان مشترک و فرآیند یکنواخت در تمام تیمها</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>🔌 یکپارچگی سیستمی</strong></td>
|
||
<td>ارتباط با ابزارهای خارجی از طریق Webhook</td>
|
||
<td>خودکارسازی اعلانها و اتصال به اکوسیستم موجود سازمان</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>🧠 کاهش بار شناختی</strong></td>
|
||
<td>رابط کاربری ساده و متمرکز بدون ویژگیهای اضافی</td>
|
||
<td>کاهش زمان آموزش و افزایش تمرکز تیم بر کار اصلی</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="quote-box">
|
||
<p>ابزاری که تیم واقعاً از آن استفاده کند، ارزشمندتر از ابزاری است که فقط خریداری شده ولی کسی سراغش نمیرود. سادگی xKanban تضمین میکند که نرخ پذیرش در تیم به حداکثر میرسد.</p>
|
||
<div class="source">— اصل پذیرش فناوری در مهندسی نرمافزار</div>
|
||
</div>
|
||
|
||
<div class="highlight-box">
|
||
<strong>📊 ارزش تجمعی:</strong> هر یک از ارزشهای فوق به تنهایی مفید است، اما ترکیب آنها یک اثر همافزایی (Synergy) ایجاد میکند: تیمی که سریع شروع میکند، امن کار میکند، شفافیت دارد و دادههایش قابل حمل است، به مراتب چابکتر و تابآورتر از تیمی است که هر یک از این مزایا را از ابزارهای جداگانه تأمین میکند.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<!-- بخش ۴: معماری دقیق پروژه -->
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۴</div>
|
||
<div class="section-title">
|
||
<h3>معماری فنی پروژه</h3>
|
||
<div class="subtitle">Technical Architecture Deep Dive</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>xKanban بر پایه معماری <strong>Single-Page Application (SPA)</strong> با الگوی <strong>State-Driven Rendering</strong> پیادهسازی شده است. تمامی منطق در سمت کلاینت اجرا میشود و از معماری لایهای سهتایی Presentation / Application / Data استفاده شده است.</p>
|
||
|
||
<div class="architecture-diagram">
|
||
<div class="arch-layer">
|
||
<div class="arch-layer-title">🎨 Presentation Layer</div>
|
||
<div class="arch-components">
|
||
<span class="arch-chip">Toolbar Renderer</span>
|
||
<span class="arch-chip">Board View</span>
|
||
<span class="arch-chip">Column Renderer</span>
|
||
<span class="arch-chip">Card Renderer</span>
|
||
<span class="arch-chip">Modal System</span>
|
||
<span class="arch-chip">Filter Panel</span>
|
||
<span class="arch-chip">Toast Notifications</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-arrow">▼</div>
|
||
<div class="arch-layer">
|
||
<div class="arch-layer-title">⚙️ Application Layer</div>
|
||
<div class="arch-components">
|
||
<span class="arch-chip">Project Manager</span>
|
||
<span class="arch-chip">Board Manager</span>
|
||
<span class="arch-chip">Column Manager</span>
|
||
<span class="arch-chip">Card Manager</span>
|
||
<span class="arch-chip">Tag Manager</span>
|
||
<span class="arch-chip">Filter Engine</span>
|
||
<span class="arch-chip">Webhook Service</span>
|
||
<span class="arch-chip">Shortcut Handler</span>
|
||
<span class="arch-chip">Export Engine</span>
|
||
</div>
|
||
</div>
|
||
<div class="arch-arrow">▼</div>
|
||
<div class="arch-layer">
|
||
<div class="arch-layer-title">💾 Data Layer</div>
|
||
<div class="arch-components">
|
||
<span class="arch-chip">State Container</span>
|
||
<span class="arch-chip">LocalStorage Adapter</span>
|
||
<span class="arch-chip">AutoSave Engine</span>
|
||
<span class="arch-chip">JSON Serializer</span>
|
||
<span class="arch-chip">UUID Generator</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">الف) متدهای راهاندازی و چرخه حیات</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── راهاندازی اولیه برنامه ──</span><br>
|
||
<span class="key">function</span> <span class="key">init</span>() { ... }<br><br>
|
||
<span class="comment">// ── رندر کامل رابط کاربری ──</span><br>
|
||
<span class="key">function</span> <span class="key">render</span>() { ... }<br><br>
|
||
<span class="comment">// ── رندر نوار ابزار بالا ──</span><br>
|
||
<span class="key">function</span> <span class="key">renderToolbar</span>() { ... }<br><br>
|
||
<span class="comment">// ── رندر برد فعال ──</span><br>
|
||
<span class="key">function</span> <span class="key">renderBoard</span>() { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ب) متدهای مدیریت پروژه و پایداری</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── ذخیره پروژه در LocalStorage ──</span><br>
|
||
<span class="key">function</span> <span class="key">saveProject</span>() { ... }<br><br>
|
||
<span class="comment">// ── بارگذاری پروژه از LocalStorage ──</span><br>
|
||
<span class="key">function</span> <span class="key">loadProject</span>() { ... }<br><br>
|
||
<span class="comment">// ── ذخیره خودکار با Debounce ──</span><br>
|
||
<span class="key">function</span> <span class="key">scheduleAutoSave</span>() { ... }<br><br>
|
||
<span class="comment">// ── بازیابی دادههای ذخیره خودکار ──</span><br>
|
||
<span class="key">function</span> <span class="key">recoverAutoSave</span>() { ... }<br><br>
|
||
<span class="comment">// ── تنظیمات پروژه (عنوان، توضیحات، وبهوک) ──</span><br>
|
||
<span class="key">function</span> <span class="key">openProjectSettings</span>() { ... }<br>
|
||
<span class="key">function</span> <span class="key">saveProjectSettings</span>() { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ج) متدهای مدیریت بردها</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── ایجاد برد جدید ──</span><br>
|
||
<span class="key">function</span> <span class="key">createBoard</span>() { ... }<br><br>
|
||
<span class="comment">// ── ویرایش برد موجود ──</span><br>
|
||
<span class="key">function</span> <span class="key">editBoard</span>(boardId) { ... }<br><br>
|
||
<span class="comment">// ── حذف برد ──</span><br>
|
||
<span class="key">function</span> <span class="key">deleteBoard</span>(boardId) { ... }<br><br>
|
||
<span class="comment">// ── جابجایی بین بردها ──</span><br>
|
||
<span class="key">function</span> <span class="key">switchBoard</span>(boardId) { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">د) متدهای مدیریت ستونها</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── ایجاد ستون جدید ──</span><br>
|
||
<span class="key">function</span> <span class="key">createColumn</span>() { ... }<br><br>
|
||
<span class="comment">// ── ویرایش ستون ──</span><br>
|
||
<span class="key">function</span> <span class="key">editColumn</span>(columnId) { ... }<br><br>
|
||
<span class="comment">// ── حذف ستون ──</span><br>
|
||
<span class="key">function</span> <span class="key">deleteColumn</span>(columnId) { ... }<br><br>
|
||
<span class="comment">// ── جابجایی ستون با Drag & Drop ──</span><br>
|
||
<span class="key">function</span> <span class="key">moveColumn</span>(fromIndex, toIndex) { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">هـ) متدهای مدیریت کارتها (غنیترین ماژول)</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── ایجاد کارت جدید ──</span><br>
|
||
<span class="key">function</span> <span class="key">createCard</span>(columnId) { ... }<br><br>
|
||
<span class="comment">// ── ویرایش کارت (Modal کامل) ──</span><br>
|
||
<span class="key">function</span> <span class="key">editCard</span>(cardId) { ... }<br><br>
|
||
<span class="comment">// ── حذف کارت ──</span><br>
|
||
<span class="key">function</span> <span class="key">deleteCard</span>(cardId) { ... }<br><br>
|
||
<span class="comment">// ── جابجایی کارت بین ستونها ──</span><br>
|
||
<span class="key">function</span> <span class="key">moveCard</span>(cardId, targetColumnId) { ... }<br><br>
|
||
<span class="comment">// ── افزودن/حذف مسئول ──</span><br>
|
||
<span class="key">function</span> <span class="key">addAssignee</span>(cardId, name) { ... }<br>
|
||
<span class="key">function</span> <span class="key">removeAssignee</span>(cardId, name) { ... }<br><br>
|
||
<span class="comment">// ── مدیریت چکلیست ──</span><br>
|
||
<span class="key">function</span> <span class="key">addChecklistItem</span>(cardId, text) { ... }<br>
|
||
<span class="key">function</span> <span class="key">toggleChecklistItem</span>(cardId, itemIndex) { ... }<br>
|
||
<span class="key">function</span> <span class="key">removeChecklistItem</span>(cardId, itemIndex) { ... }<br><br>
|
||
<span class="comment">// ── مدیریت وابستگیها ──</span><br>
|
||
<span class="key">function</span> <span class="key">addDependency</span>(cardId, dependencyId) { ... }<br>
|
||
<span class="key">function</span> <span class="key">removeDependency</span>(cardId, dependencyId) { ... }<br><br>
|
||
<span class="comment">// ── ثبت تاریخچه جابجایی ──</span><br>
|
||
<span class="key">function</span> <span class="key">addHistoryEntry</span>(cardId, fromColumn, toColumn) { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">و) متدهای مدیریت تگها</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── مدیریت تگهای عمومی پروژه ──</span><br>
|
||
<span class="key">function</span> <span class="key">openTagManager</span>() { ... }<br>
|
||
<span class="key">function</span> <span class="key">addTag</span>(name, color) { ... }<br>
|
||
<span class="key">function</span> <span class="key">removeTag</span>(tagId) { ... }<br><br>
|
||
<span class="comment">// ── تخصیص/حذف تگ به کارت ──</span><br>
|
||
<span class="key">function</span> <span class="key">assignTagToCard</span>(cardId, tagId) { ... }<br>
|
||
<span class="key">function</span> <span class="key">removeTagFromCard</span>(cardId, tagId) { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ز) متدهای فیلتر و جستجو</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── فیلتر چندبعدی کارتها ──</span><br>
|
||
<span class="key">function</span> <span class="key">filterCards</span>() { ... }<br><br>
|
||
<span class="comment">// ── جستجوی متنی در کارتها ──</span><br>
|
||
<span class="key">function</span> <span class="key">searchCards</span>(query) { ... }<br><br>
|
||
<span class="comment">// ── پاکسازی فیلترها ──</span><br>
|
||
<span class="key">function</span> <span class="key">clearFilters</span>() { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ح) متدهای صادرات و واردات</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── صادرات پروژه به فایل JSON ──</span><br>
|
||
<span class="key">function</span> <span class="key">exportJSON</span>() { ... }<br><br>
|
||
<span class="comment">// ── واردات پروژه از فایل JSON ──</span><br>
|
||
<span class="key">function</span> <span class="key">importJSON</span>(file) { ... }<br><br>
|
||
<span class="comment">// ── خروجی Markdown ──</span><br>
|
||
<span class="key">function</span> <span class="key">exportMarkdown</span>(boardFilter) { ... }<br><br>
|
||
<span class="comment">// ── خروجی CSV ──</span><br>
|
||
<span class="key">function</span> <span class="key">exportCSV</span>(boardFilter) { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ط) متدهای یکپارچگی و Webhook</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── ارسال رویداد به Webhook ──</span><br>
|
||
<span class="key">function</span> <span class="key">sendWebhook</span>(eventType, data) { ... }<br><br>
|
||
<span class="comment">// ── تست اتصال Webhook ──</span><br>
|
||
<span class="key">function</span> <span class="key">testWebhook</span>() { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ی) متدهای رابط کاربری و تعامل</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── سیستم Modal ──</span><br>
|
||
<span class="key">function</span> <span class="key">openModal</span>(modalId) { ... }<br>
|
||
<span class="key">function</span> <span class="key">closeModal</span>(modalId) { ... }<br><br>
|
||
<span class="comment">// ── اعلانهای Toast ──</span><br>
|
||
<span class="key">function</span> <span class="key">showToast</span>(message, type) { ... }<br><br>
|
||
<span class="comment">// ── تغییر حالت تاریک/روشن ──</span><br>
|
||
<span class="key">function</span> <span class="key">toggleDarkMode</span>() { ... }<br><br>
|
||
<span class="comment">// ── مدیریت میانبرهای کیبورد ──</span><br>
|
||
<span class="key">function</span> <span class="key">handleKeyboardShortcuts</span>(event) { ... }
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ک) متدهای کمکی</h4>
|
||
<div class="code-box">
|
||
<span class="comment">// ── تولید شناسه یکتا ──</span><br>
|
||
<span class="key">function</span> <span class="key">generateUUID</span>() { ... }<br><br>
|
||
<span class="comment">// ── محاسبه وضعیت سررسید کارت ──</span><br>
|
||
<span class="key">function</span> <span class="key">getCardDueStatus</span>(card) { ... }<br><br>
|
||
<span class="comment">// ── محاسبه آمار برد ──</span><br>
|
||
<span class="key">function</span> <span class="key">calculateBoardStats</span>() { ... }<br><br>
|
||
<span class="comment">// ── دانلود فایل ──</span><br>
|
||
<span class="key">function</span> <span class="key">downloadFile</span>(content, filename, mimeType) { ... }
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 اصل طراحی کدها:</strong> تمامی متدها بر اساس اصل <strong>Single Responsibility</strong> طراحی شدهاند. هر متد دقیقاً یک وظیفه مشخص دارد و از ترکیب آنها، رفتارهای پیچیدهتر ساخته میشود. بدنه متدها در این مستند با <code>...</code> خلاصه شده تا تمرکز بر ساختار و معماری باقی بماند.
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">جریان داده در سیستم:</h4>
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>مرحله</th>
|
||
<th>عملیات</th>
|
||
<th>متد درگیر</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>۱</td>
|
||
<td>کاربر عملیاتی انجام میدهد (مثلاً ایجاد کارت)</td>
|
||
<td><code>createCard()</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>۲</td>
|
||
<td>وضعیت State بهروزرسانی میشود</td>
|
||
<td>مستقیم روی State Container</td>
|
||
</tr>
|
||
<tr>
|
||
<td>۳</td>
|
||
<td>رابط کاربری مجدداً رندر میشود</td>
|
||
<td><code>render()</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>۴</td>
|
||
<td>ذخیره خودکار زمانبندی میشود</td>
|
||
<td><code>scheduleAutoSave()</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>۵</td>
|
||
<td>در صورت فعال بودن، Webhook ارسال میشود</td>
|
||
<td><code>sendWebhook()</code></td>
|
||
</tr>
|
||
<tr>
|
||
<td>۶</td>
|
||
<td>اعلان تأیید به کاربر نمایش داده میشود</td>
|
||
<td><code>showToast()</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<!-- بخش ۵: مخاطبان هدف -->
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۵</div>
|
||
<div class="section-title">
|
||
<h3>مخاطبان هدف: سازمانها و تیمهای مناسب</h3>
|
||
<div class="subtitle">Target Audience & Ideal Use Cases</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>xKanban برای طیف گستردهای از سازمانها و تیمها مناسب است. در ادامه، مخاطبان ایدهآل این ابزار بر اساس ویژگیها و نیازمندیهایشان دستهبندی شدهاند:</p>
|
||
|
||
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) بر اساس نوع سازمان:</h4>
|
||
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>نوع سازمان</th>
|
||
<th>چرا xKanban مناسب است؟</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>استارتاپها</strong></td>
|
||
<td>بودجه محدود، نیاز به شروع سریع، عدم تمایل به وابستگی به ابزارهای گرانقیمت SaaS</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>شرکتهای کوچک و متوسط</strong></td>
|
||
<td>فقدان تیم IT اختصاصی برای نگهداری سرور، نیاز به ابزار ساده ولی حرفهای</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>سازمانهای دولتی و نظامی</strong></td>
|
||
<td>الزامات سختگیرانه امنیتی، ممنوعیت ارسال داده به سرورهای خارجی، نیاز به کارکرد آفلاین</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>مراکز تحقیقاتی و دانشگاهی</strong></td>
|
||
<td>مدیریت پروژههای پژوهشی، کار در محیطهای ایزوله شبکهای، بودجه محدود</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>شرکتهای مشاورهای</strong></td>
|
||
<td>مدیریت همزمان چندین پروژه مشتری، نیاز به قابلیت حمل و ارائه گزارش</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>تیمهای توزیعشده و ریموت</strong></td>
|
||
<td>اشتراکگذاری آسان پروژه از طریق فایل، عدم وابستگی به اتصال اینترنت پایدار</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ب) بر اساس نوع تیم:</h4>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">💻</div>
|
||
<h5>تیمهای توسعه نرمافزار</h5>
|
||
<p>مدیریت اسپرینتها، پیگیری باگها، مدیریت وابستگیهای فنی و یکپارچگی با ابزارهای CI/CD از طریق Webhook</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎨</div>
|
||
<h5>تیمهای طراحی و خلاقیت</h5>
|
||
<p>پیگیری مراحل طراحی، مدیریت بازخوردها، رنگبندی بصری برای دستهبندی پروژهها</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📢</div>
|
||
<h5>تیمهای بازاریابی و محتوا</h5>
|
||
<p>مدیریت تقویم محتوایی، پیگیری کمپینها، تخصیص وظایف به نویسندگان و طراحان</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🏗️</div>
|
||
<h5>تیمهای عملیات و زیرساخت</h5>
|
||
<p>مدیریت تیکتها، پیگیری حوادث، ثبت تاریخچه جابجایی برای گزارشگیری</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎓</div>
|
||
<h5>تیمهای آموزشی و آکادمیک</h5>
|
||
<p>مدیریت پروژههای دانشجویی، پیگیری تکالیف، کار در محیطهای بدون اینترنت</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🧑💼</div>
|
||
<h5>فریلنسرها و مشاوران مستقل</h5>
|
||
<p>مدیریت چندین پروژه مشتری، قابلیت حمل، عدم هزینه اشتراک ماهیانه</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ج) سناریوهای ایدهآل استفاده:</h4>
|
||
|
||
<div class="comparison-grid">
|
||
<div class="comparison-card recommended">
|
||
<span class="card-badge">ایدهآل ✓</span>
|
||
<h4>محیطهای با محدودیت امنیتی</h4>
|
||
<ul>
|
||
<li><span>شبکه ایزوله</span> <span class="value">پشتیبانی کامل</span></li>
|
||
<li><span>بدون اینترنت</span> <span class="value">پشتیبانی کامل</span></li>
|
||
<li><span>داده حساس</span> <span class="value">ذخیره محلی</span></li>
|
||
<li><span>بدون سرور</span> <span class="value">بدون نیاز</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="comparison-card recommended">
|
||
<span class="card-badge">ایدهآل ✓</span>
|
||
<h4>تیمهای چابک کوچک</h4>
|
||
<ul>
|
||
<li><span>اندازه تیم</span> <span class="value">۲ تا ۱۵ نفر</span></li>
|
||
<li><span>متدولوژی</span> <span class="value">کانبان / اسکرام</span></li>
|
||
<li><span>شروع سریع</span> <span class="value">آنی</span></li>
|
||
<li><span>هزینه</span> <span class="value">صفر</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>💡 نکته مهم:</strong> xKanban در حال حاضر برای استفاده فردی یا تیمهای کوچک تا متوسط طراحی شده است. برای سازمانهای بزرگ با نیاز به همزمانی چندکاربره بلادرنگ، نسخه فعلی به عنوان ابزار مکمل در کنار سیستمهای سازمانی قابل استفاده است و نسخه چندکاربره در نقشه راه آینده قرار دارد.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<!-- بخش ۶: جمعبندی -->
|
||
<!-- ═══════════════════════════════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">۶</div>
|
||
<div class="section-title">
|
||
<h3>جمعبندی نهایی</h3>
|
||
<div class="subtitle">Final Summary</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<p>xKanban پاسخی مهندسیشده به معضلات واقعی مدیریت پروژه در دنیای مدرن است. این ابزار با حذف وابستگی به سرور، تضمین مالکیت دادهها، ارائه قابلیت حمل بینظیر و حفظ غنای عملکردی، جایگاه منحصربهفردی در اکوسیستم ابزارهای مدیریت پروژه دارد.</p>
|
||
|
||
<div class="conclusion-box">
|
||
<h3>🎯 ارزش پیشنهادی xKanban در یک نگاه</h3>
|
||
<p>ابزاری حرفهای، مستقل، امن و قابل حمل برای مدیریت پروژههای کانبان که بدون هیچ هزینهای، بدون نیاز به سرور و بدون وابستگی به اینترنت، در اختیار تیم شما قرار میگیرد.</p>
|
||
<div class="highlight">
|
||
<strong>💎 فرمول ارزش xKanban:</strong><br>
|
||
استقلال از زیرساخت + مالکیت کامل داده + قابلیت حمل + غنای عملکردی + سادگی = <strong>آزادی عمل مطلق تیم</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<strong>📞 گام بعدی:</strong> برای ارزیابی عملی xKanban در محیط سازمان خود، میتوانید فایل HTML را مستقیماً در مرورگر باز کرده و بدون هیچ پیکربندی، تجربه کاربری واقعی را لمس کنید. جهت سفارشیسازی یا توسعه ویژگیهای اختصاصی، آماده برگزاری جلسه فنی هستیم.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-info">
|
||
این مستند محرمانه بوده و صرفاً جهت استفاده داخلی و ارائه به ذینفعان تهیه شده است. هرگونه کپیبرداری یا افشا بدون اجازه کتبی ممنوع است.
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="document-footer">
|
||
<div class="footer-brand">طراحی، تحلیل و توسعه: هادی خزاعی اصل</div>
|
||
<div style="font-size: 11px; opacity: 0.8; margin-bottom: 5px;">معمار و توسعهدهنده ارشد نرمافزار | متخصص .NET و Angular</div>
|
||
<div class="footer-divider"></div>
|
||
<div>تاریخ تهیه: یکشنبه ۲۲ شهریور ۱۴۰۵ (۱۳ سپتامبر ۲۰۲۶) | ساعت: ۱۱:۳۰ | نسخه: ۱.۰.۰ | طبقهبندی: داخلی - محصولی</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html> |