Deneyim: Promt-AI-“Incident Management" Formu

ITSM (Information Technology Service Management), yani Bilgi Teknolojileri Hizmet Yönetimi, kurumlarda BT hizmetlerinin planlı, kontrollü ve kullanıcı odaklı yönetilmesini sağlayan süreçler bütünüdür.

Temel amacı:

Hizmet kalitesini artırmak
Kesintileri azaltmak
Kullanıcı memnuniyetini yükseltmek
BT operasyonlarını standart hale getirmektir.

ITSM Süreçleri ve Amaçları:

Incident Management (Olay Yönetimi)

Incident Management, kullanıcıların yaşadığı sistem sorunları veya hizmet kesintilerinin kayıt altına alınması, önceliklendirilmesi ve en kısa sürede çözüme ulaştırılması sürecidir.

Örnek:

E-posta çalışmıyor
VPN bağlantısı yok
Uygulamaya giriş yapılamıyor
İnternet kesintisi yaşanıyor

Temel hedef:

Hizmeti mümkün olan en kısa sürede normale döndürmek.

Incident Management Süreci

1. Olayın Bildirilmesi

Kullanıcı veya izleme sistemleri problemi bildirir.

2. Ticket Açılması

Olay sistem üzerinde kayıt altına alınır.

3. Öncelik Belirleme

Sorunun etkisine göre kritik seviyesi atanır.

4. Çözüm Süreci

Service Desk veya ilgili teknik ekip sorunu çözer.

5. Eskalasyon

Çözülemeyen olay uzman ekiplere aktarılır.

6. Kapanış

Sorun çözüldükten sonra ticket kapatılır.

Incident Management’ın Faydaları

Kesinti sürelerini azaltır
Kullanıcı memnuniyetini artırır
İş kaybını önler
BT operasyonlarını düzenler
SLA takibini kolaylaştırır

Incident ve Problem Management Farkı

Sonuç:

Incident Management, modern ITSM süreçlerinin en önemli parçalarından biridir. Kurumlarda sistem sürekliliğini sağlamak, kullanıcı sorunlarını hızlı çözmek ve hizmet kalitesini artırmak için kritik rol oynar. Etkin bir olay yönetimi süreci sayesinde BT ekipleri daha kontrollü, ölçülebilir ve verimli çalışabilir.

AI ile “Incident Management" Formu:

Yapay zeka uygulamaları üzerinde talimatlarla oluşturulan form aşağıdaki gibidir.

Not defteri açarak aşağıdaki (yeşil) html kodu içine kaydedin. Not defteri uzantısını .txt yerine .html olarak değiştirip Enter tuşuna basınız.

Sol tarafta görünen logo için, html dosyanız nerede ise, masaüstü veya oluşturulan bir klasör. Logonuzda aynı yerde olursa forma yansır. Logo ismi "logo.jpg" olmalı. Çift tıklayarak açtığınızda, browser üzerinde form açılışı gerçekleşir.

Başlık, başlığın altındaki, başlığın sağındaki ve alttaki yazıları, not defteri içinde "Ctrl + F" tuşları ile kelime yazarak bulabilir, ilgili metinleri kendinize göre uyarlayarak kaydederek kullanabilirsiniz.

Form altında bulunan butonlardan, "Önizle" butonuna bastığınızda, Form görünümü aşağıdaki gibidir.

Form altında bulunan butonlardan, "Kaydet/PDF" bastığınızda "Pdf" olarak kaydeder, yazdırabilirsiniz.

Form altında bulunan butonlardan, "CSV İndir" butonuna bastığınızda, Text bilgisini dışarı alabilirsiniz.

HTML Kod:

<!DOCTYPE html>

<head>

<title>Incident Management Form</title>

<style>

:root{

--blue1:#0b2158;

--blue2:#173b8f;

--line:#dbe3ee;

--bg:#f1f5f9;

}

margin:0;

padding:0;

box-sizing:border-box;

font-family:Arial,sans-serif;

}

body{

background:var(--bg);

padding:14px;

color:#0f172a;

}

.container{

max-width:1450px;

margin:auto;

}

/* HEADER */

.header{

background:linear-gradient(90deg,var(--blue1),var(--blue2));

border-radius:22px;

padding:14px 18px;

margin-bottom:16px;

color:#fff;

box-shadow:0 5px 16px rgba(0,0,0,.12);

display:grid;

grid-template-columns:70px 1fr 320px;

align-items:center;

column-gap:18px;

}

/* LOGO */

.logoBox{

width:70px;

height:70px;

background:#fff;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.logoBox img{

width:82%;

height:82%;

object-fit:contain;

}

/* CENTER */

.headerCenter{

display:flex;

flex-direction:column;

justify-content:center;

}

.headerTitle{

font-size:26px;

font-weight:900;

line-height:1;

letter-spacing:.3px;

}

.headerSub{

margin-top:6px;

font-size:12px;

color:#dbeafe;

}

/* RIGHT */

.headerRight{

text-align:right;

font-size:13px;

font-weight:800;

line-height:1.3;

display:flex;

align-items:center;

justify-content:flex-end;

height:100%;

}

/* CARD */

.card{

background:#fff;

border-radius:18px;

padding:18px;

box-shadow:0 5px 16px rgba(0,0,0,.08);

}

/* FORM */

.grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.full{

grid-column:1/-1;

}

.group{

display:flex;

flex-direction:column;

}

label{

margin-bottom:5px;

font-size:13px;

font-weight:700;

}

input,

select,

textarea{

width:100%;

border:1px solid #cfd8e3;

border-radius:10px;

padding:10px;

background:#f8fafc;

font-size:13px;

outline:none;

}

textarea{

resize:none;

min-height:85px;

}

input:focus,

select:focus,

textarea:focus{

background:#fff;

border-color:#2563eb;

}

/* PERSONEL */

.personel{

display:flex;

flex-direction:column;

gap:10px;

}

.row{

display:flex;

gap:10px;

}

.row input{

flex:1;

}

.iconBtn{

width:40px;

border:none;

border-radius:10px;

color:#fff;

font-size:18px;

cursor:pointer;

}

.add{background:#16a34a;}

.del{background:#dc2626;}

/* BUTTONS */

.buttons{

margin-top:18px;

display:flex;

flex-wrap:wrap;

gap:10px;

}

.btn{

border:none;

border-radius:10px;

padding:11px 16px;

color:#fff;

font-size:13px;

font-weight:700;

cursor:pointer;

}

.previewBtn{background:#173b8f;}

.printBtn{background:#334155;}

.csvBtn{background:#15803d;}

/* PREVIEW */

.preview{

display:none;

margin-top:18px;

}

.preview.active{

display:block;

}

/* TABLE */

.tableHeader{

display:grid;

grid-template-columns:220px 1fr;

background:#173b8f;

color:#fff;

border-radius:12px 12px 0 0;

overflow:hidden;

}

.tableHeader div{

padding:10px 12px;

font-size:12px;

font-weight:700;

}

table{

width:100%;

border-collapse:collapse;

table-layout:fixed;

}

td{

border:1px solid var(--line);

padding:8px 12px;

font-size:12px;

line-height:1.35;

vertical-align:top;

word-break:break-word;

}

td:first-child{

width:220px;

font-weight:700;

background:#f8fafc;

}

tr:nth-child(even) td:last-child{

background:#fcfdff;

}

.footer{

background:#173b8f;

color:#dbeafe;

text-align:center;

padding:8px;

border-radius:0 0 12px 12px;

font-size:12px;

font-weight:700;

}

/* MOBILE */

@media(max-width:900px){

.header{

grid-template-columns:1fr;

row-gap:14px;

}

.headerRight{

justify-content:flex-start;

text-align:left;

}

.grid{

grid-template-columns:1fr;

}

.tableHeader{

grid-template-columns:140px 1fr;

}

td:first-child{

width:140px;

}

/* PRINT */

@page{

size:A4 landscape;

margin:6mm;

}

@media print{

body{

background:#fff;

padding:0;

}

.formArea,

.buttons{

display:none !important;

}

.preview{

display:block !important;

margin:0;

}

.header,

.card{

box-shadow:none;

}

.header{

display:grid !important;

grid-template-columns:70px 1fr 320px !important;

align-items:center !important;

}

-webkit-print-color-adjust:exact !important;

print-color-adjust:exact !important;

}

</style>

</head>

<body>

</div>

INCIDENT MANAGEMENT FORM

</div>

Hizmet kesintisi veya kullanıcı problemlerinin kayıt altına alınması süreci

</div>

HELPDESK

</div>

<label>Incident No</label>

</div>

<label>Tarih</label>

</div>

<label>Bildiren Kişi</label>

</div>

<label>Departman</label>

</div>

<label>Öncelik</label>

<option>Düşük</option>

<option>Yüksek</option>

<option>Kritik</option>

</select>

</div>

<label>Etki Seviyesi</label>

<option>Düşük</option>

<option>Yüksek</option>

<option>Kurumsal Kritik</option>

</select>

</div>

<label>Kategori</label>

</div>

<label>Açıklama</label>

</div>

<label>Atanan Personel</label>

<button

type="button"

class="iconBtn add"

onclick="ekle()">

</button>

</div>

<label>Kapanış Tarihi</label>

</div>

<label>Çözüm Notu</label>

</div>

Önizle

</button>

Kaydet / PDF

</button>

CSV İndir

</button>

</div>

</div>

INCIDENT MANAGEMENT FORM

</div>

Hizmet kesintisi veya kullanıcı problemlerinin kayıt altına alınması süreci

</div>

HELPDESK

</div>

<div>Bilgi</div>

</div>

MYO

</div>

const $ = id => document.getElementById(id);

const fields = {

incidentNo:"Incident No",

tarih:"Tarih",

bildiren:"Bildiren Kişi",

departman:"Departman",

oncelik:"Öncelik",

etki:"Etki Seviyesi",

kategori:"Kategori",

aciklama:"Açıklama",

kapanis:"Kapanış Tarihi",

cozum:"Çözüm Notu"

};

document.querySelectorAll("textarea").forEach(t=>{

t.addEventListener("input",()=>{

t.style.height="auto";

t.style.height=t.scrollHeight+"px";

});

function ekle(){

const row=document.createElement("div");

row.className="row";

row.innerHTML=`

<button

type="button"

class="iconBtn del"

onclick="this.parentElement.remove()">

</button>

$("personel").appendChild(row);

}

function personeller(){

return [...document.querySelectorAll(".personelInput")]

.map(x=>x.value.trim())

.filter(Boolean)

.join("<br>") || "-";

}

function render(){

let html="";

for(let id in fields){

html+=`

<tr>

<td>${fields[id]}</td>

<td>${$(id).value || "-"}</td>

</tr>

}

html+=`

<tr>

<td>Atanan Personel</td>

<td>${personeller()}</td>

</tr>

$("table").innerHTML=html;

}

function onizle(){

render();

$("preview").classList.add("active");

$("preview").scrollIntoView({

behavior:"smooth"

});

}

function pdf(){

render();

$("preview").classList.add("active");

setTimeout(()=>window.print(),150);

}

function csvIndir(){

const rows=[["Alan","Bilgi"]];

for(let id in fields){

rows.push([

fields[id],

$(id).value

]);

}

rows.push([

"Atanan Personel",

personeller().replace(/<br>/g," | ")

]);

const csv=

"\uFEFF"+

rows.map(r=>

r.map(v=>`"${(v||"").replace(/"/g,'""')}"`)

.join(";")

).join("\n");

const blob=new Blob(

[csv],

{type:"text/csv;charset=utf-8;"}

);

const a=document.createElement("a");

a.href=URL.createObjectURL(blob);

a.download="incident_management_form.csv";

a.click();

}

</script>

</body>

</html>

Form Promt:

Sen uzman seviyede Senior Frontend Developer, UI/UX Designer ve Kurumsal Web Arayüz Uzmanısın.

Aşağıdaki özelliklerde profesyonel bir Incident Management Form tasarımı oluştur.

TEK DOSYA olacak şekilde:

- HTML

- CSS

- JavaScript

aynı dosya içinde yaz.

Tasarım:

- Modern

- Kurumsal

- ITSM / Helpdesk uyumlu

- Beyaz + Lacivert tema

- Responsive

- Print/PDF uyumlu

- A4 Landscape yazdırma desteği

- Minimal ama premium görünüm

GENEL YAPI:

- Sayfa arka planı açık gri (#f1f5f9)

- Ana container max-width: 1450px

- Kart yapısı kullanılacak

- Border radius yüksek olacak

- Soft shadow kullanılacak

- Tam responsive olacak

HEADER:

Header 3 kolonlu grid yapıda olacak:

1. Sol:

- Beyaz kutu içinde logo alanı

- Yuvarlatılmış köşeler

- Logo responsive olacak

2. Orta:

- Büyük başlık:

INCIDENT MANAGEMENT FORM

- Alt açıklama:

Hizmet kesintisi veya kullanıcı problemlerinin kayıt altına alınması süreci

3. Sağ:

- HELPDESK yazısı

- Sağ hizalı

Header:

- Linear gradient koyu mavi tonlarında

- Beyaz yazılar

- Premium görünüm

FORM ALANLARI:

Grid sistem kullanılacak.

Desktop:

- 2 kolon

Mobil:

- 1 kolon

Form alanları:

- Incident No

- Tarih

- Bildiren Kişi

- Departman

- Öncelik

- Etki Seviyesi

- Kategori

- Açıklama

- Atanan Personel

- Kapanış Tarihi

- Çözüm Notu

Input tasarımı:

- Rounded

- Açık gri arka plan

- Focus olduğunda mavi border

- Modern görünüm

TEXTAREA:

- Otomatik height büyüsün

- resize:none olsun

PERSONEL ALANI:

Dinamik personel ekleme sistemi yap:

- "+" butonu ile yeni satır ekle

- "-" butonu ile sil

- JavaScript ile çalışsın

BUTONLAR:

3 adet buton olacak:

1. Önizle

2. Kaydet / PDF

3. CSV İndir

Butonlar:

- Renkli

- Hover efektli

- Rounded

- Font-weight:bold

ÖNİZLEME ALANI:

Formun altında preview alanı oluştur.

Başlangıçta gizli olsun.

Önizle denince:

- tablo oluşsun

- form verileri tabloya aktarılsın

TABLO:

- 2 kolon:

Alan | Bilgi

- Başlık kısmı lacivert

- Zebra row efekti

- Border collapse

- Responsive görünüm

FOOTER:

Alt kısımda küçük kurumsal footer olsun.

JAVASCRIPT:

Şunları yap:

- Form verilerini preview tablosuna aktar

- window.print() ile PDF/yazdırma desteği

- CSV export sistemi

- Dinamik personel ekleme/silme

- Auto textarea resize

- Smooth scroll preview

PRINT CSS:

@media print kullan.

Yazdırmada:

- Form alanları gizlensin

- Sadece preview görünsün

- A4 landscape olsun

- Renkler korunmalı

- Shadow kaldırılmalı

CSS:

- :root değişkenleri kullan

- Modern naming convention kullan

- Temiz ve okunabilir kod yaz

Kod:

- Production quality olsun

- Hatasız çalışsın

- Tek HTML dosyası olsun

- Harici framework kullanma

- Vanilla JS kullan

- Tam responsive olsun

Ek olarak:

- Kod düzenli yorum satırları içersin

- Kurumsal ITSM standartlarına uygun görünüm oluştur

- Print çıktısı Word/PDF kalitesinde olsun

Promt-AI-“Incident Management" Formu - ITSM Süreçleri