<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Yayıncılığı Araçları Rehberi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/10f46c0719.js" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #f8f9fa;
background-image: url('bg1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: #333;
z-index: 1;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
.container {
position: relative;
z-index: 2;
}
.card {
display: flex; /* Flexbox layoutunu etkinleştirir. */
flex-direction: column; /* İçerikleri dikey yönde sıralar. */
height: 100%; /* Kartın yüksekliğini ebeveynine göre ayarlar. */
}
.card-body {
flex: 1; /* Tüm kullanılabilir alanı kaplar. */
display: flex; /* Flexbox layoutunu etkinleştirir. */
flex-direction: column; /* İçerikleri dikey yönde sıralar. */
padding: 20px; /* İç boşluk */
}
.card-body > *:last-child {
margin-top: auto; /* Son elemanı aşağı ittirir. */
}
.card:hover {
transform: translateY(-5px); /* Hover'da hafif yukarı hareket */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Hover'da daha belirgin gölge */
}
.card-header {
background: linear-gradient(135deg, #6dd5ed, #2193b0); /* Gradyan arka plan */
color: white; /* Başlık metni rengi */
padding: 20px; /* İç boşluk */
font-size: 1.5em; /* Başlık yazı boyutu */
}
.card-header1 {
background: linear-gradient(135deg, #6dd5ed 25%, #2193b0 75%);
color: white; /* Başlık metni rengi */
padding: 20px; /* İç boşluk */
font-size: 1.25em; /* Başlık yazı boyutu */
}
.fa-icon {
color: #2193b0; /* İkon rengi */
}
.footer {
background-color: #2c3e50; /* Footer arka plan rengi */
color: white; /* Metin rengi */
padding: 40px 0; /* Üst ve alt padding */
border-radius: 10px; /* Kenar yuvarlaklığı */
margin: 40px auto; /* Üst ve alt marjin */
width: 80%; /* Footer genişliği */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Hafif bir gölge efekti */
}
.footer h2, .footer p {
margin-bottom: 20px; /* H2 ve P elementleri için alt marjin */
}
.footer a {
color: #f39c12; /* Bağlantı rengi */
transition: color 0.2s ease-in-out; /* Renk geçiş animasyonu */
}
.footer a:hover {
color: #ffffff; /* Bağlantı hover rengi */
}
.social-icon {
font-size: 24px; /* Sosyal medya ikon boyutu */
color: #f39c12; /* Sosyal medya ikon rengi */
margin: 0 10px; /* İkonlar arası boşluk */
transition: color 0.2s ease-in-out; /* Renk geçiş animasyonu */
}
.social-icon:hover {
color: #ffffff; /* Sosyal medya ikon hover rengi */
}
/* Responsive tasarım için media sorguları */
@media (max-width: 768px) {
.footer {
width: 95%; /* Mobil cihazlarda footer genişliği */
margin: 20px auto; /* Mobil cihazlarda üst ve alt marjin */
}
}
#main-title {
font-size: 2.5rem; /* Başlık boyutunu artır */
color: #ffffff; /* Beyaz veya açık bir renk */
background-color: #0056b3; /* Mavi veya tercih ettiğiniz bir renk */
padding: 20px; /* Başlık çevresinde boşluk */
border-radius: 10px; /* Köşeleri yuvarlak yap */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Gölge efekti ekle */
text-align: center; /* Metni ortala */
transition: transform 0.3s; /* Hover animasyonu için */
}
#main-title:hover {
transform: scale(1.05); /* Başlık üzerine gelindiğinde büyüt */
}
.card-text {
font-size: 1.1rem; /* Metin boyutunu artır */
color: #333; /* Karanlık bir yazı rengi seç */
margin-bottom: 1rem; /* Paragraflar arası boşluk */
}
.card-body ul {
padding-left: 1.5rem; /* Liste için sol padding ekle */
list-style-type: disc; /* Liste öğeleri için disk şeklinde işaretler kullan */
}
.card-body li {
margin-bottom: 0.5rem; /* Liste öğeleri arası boşluk */
font-size: 1rem; /* Liste öğeleri için metin boyutu */
line-height: 1.5; /* Satır yüksekliği, okunabilirliği artırır */
}
.fa-icon {
color: #0056b3; /* İkon rengini ana renk temanıza uygun bir renk yapın */
margin-right: 0.5rem; /* İkon ve metin arası boşluk */
}
/* Özel başlık stilini güncelle */
.card-title {
font-size: 1.75rem; /* Başlık boyutunu artır */
color: #0056b3; /* Başlık rengini belirginleştir */
margin-bottom: 1.5rem; /* Başlık altı boşluk */
}
.card-img-top {
cursor: pointer; /* Resmin üzerine gelindiğinde imlecin şeklini değiştirir */
transition: transform 0.3s ease; /* Animasyon için geçiş tanımlaması */
}
.card-img-top:hover {
transform: scale(1.05); /* Resmin üzerine gelindiğinde büyütme efekti */
}
.figure-caption {
width: 100%; /* Ensures it takes up the full width of its container */
text-align: center; /* Centers the text within the figcaption */
}
.kayan-yazi-bar {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam arka plan */
color: white;
padding: 10px;
overflow: hidden;
height: 40px; /* Yükseklik */
display: flex; /* Yatay hizalamak için */
align-items: center; /* Dikeyde ortalamak için */
justify-content: center; /* Dikeyde barın ortasına hizalamak için */
}
.kayan-yazi-container {
white-space: nowrap;
animation: kaydir 25s linear infinite;
direction: rtl; /* Yazı yönü sağdan sola */
}
.kayan-yazi {
font-size: 30px; /* Yazı büyüklüğü */
margin: 10px; /* Mesajlar arası boşluk */
}
@keyframes kaydir {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.card1 {
/*background-image: url('ekampus.jpg');*/
background-size: cover;
background-position: center;
min-height: auto;
position: relative; /* Resim container'ının pozisyonunu ayarla */
}
.form-control {
height: auto;
padding: .375rem .75rem;
}
/* Modal İçeriği Stilleri */
.modal-content {
background-color: #fefefe;
margin: 5% auto; /* Ekranın ortasında ve üstten biraz aşağıda */
padding: 20px;
border: 1px solid #888;
width: 50%; /* Modal genişliğini %50 yaparak daha dar bir görünüm sağlar */
}
/* Form Elemanları için Stiller */
.modal-content .form-control {
width: 100%; /* Form elemanlarının tam genişliğini kullan */
margin-bottom: 10px; /* Form elemanları arası boşluk */
}
.modal-content form {
max-width: 100%; /* Formun maksimum genişliğini sınırla */
}
/* Daha Küçük Ekranlar İçin Responsive Ayarlar */
@media (max-width: 768px) {
.modal-content {
width: 80%; /* Mobil cihazlarda modal genişliğini artır */
}
}
/* Ekran genişliği 768px veya daha küçük olduğunda uygulanacak stiller */
@media (max-width: 768px) {
.card1 {
background-size: contain; /* Resmi tüm alanı kapsayacak şekilde ayarla */
background-position: center center; /* Resmi yatay ve dikey olarak ortala */
background-repeat: no-repeat; /* Resmin tekrarlanmasını önle */
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container mt-5">
<!-- Başlık Kartı -->
<div class="row mb-4">
<div class="col">
<div class="card">
<div class="card-body text-center">
<h2 id="main-title" class="card-title"><i class="fas fa-tools fa-icon text-center"></i>Web Yayıncılığı Araçları Rehberi</h2>
</div>
</div>
</div>
</div>
<!-- Diğer içerikler -->
<!-- Kendini Tanıtan Kart -->
<div class="card mb-3">
<!-- Arka Plan Resmi Gösteren Kart -->
<div class="card1">
<!-- Resmi göstermek ve tıklanabilir yapmak için kullanılacak HTML yapısı -->
<div class="resim-container" style="text-align: center; margin-top: 20px;">
<a href="ekampus.jpg" target="_blank">
<img src="ekampus.jpg" alt="Ekampus Resmi" style="max-width: 100%; height: auto;">
</a>
</div>
<div id="kayanYaziBar" class="kayan-yazi-bar"></div>
</div>
<!-- Resmin altına eklenecek metin ve link -->
<div class="row mt-3">
<div class="col">
<div class="card">
<div class="card-body text-center">
<p><a href="#formKismi">Mesajınızı Kayan Yazı Alanına Eklemek İçin Buraya Tıklayın</a></p>
</div>
</div>
</div>
</div>
<!-- İçerik Kartları -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<p class="lead">Web Yayıncılığı Araçları dersimiz için Can Güler hocamızın istediği dinamik bir tek sayfa Site tasarlamak için bu rehber size yardımcı olacaktır.</p>
<h3 class="sub-heading">Gereklilikler:</h3>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-code fa-icon"></i></span>HTML kodları bilgisi</li>
<li><span class="fa-li"><i class="fas fa-edit fa-icon"></i></span>HTML editörü</li>
</ul>
<h2 class="card-title">HTML Editörleri</h2>
<p class="card-text">HTML kodlarını yazmak ve düzenlemek için bir HTML editörüne ihtiyacınız olacak. Kitapta bahsedilen bazı popüler editörler şunlardır:</p>
<ul>
<!-- Diğer editörlerin listesi -->
<li><a href="https://notepad-plus-plus.org/downloads/" target="_blank">Notepad++</a>: Ücretsiz ve açık kaynak kodlu bir editör.</li>
<li><a href="https://atom.io/" target="_blank">Atom</a>: Ücretsiz ve açık kaynak kodlu, modern bir editör.</li>
<li><a href="https://www.sublimetext.com/" target="_blank">Sublime Text</a>: Ücretli, ancak birçok gelişmiş özelliğe sahip bir editör.</li>
<li><a href="https://www.adobe.com/tr/products/dreamweaver.html" target="_blank">Dreamweaver</a>: Adobe tarafından geliştirilen ücretli bir editör.</li>
<li><a href="http://bluefish.openoffice.nl/" target="_blank">Bluefish</a>: Ücretsiz ve açık kaynak kodlu, güçlü bir editör.</li>
<!-- Visual Studio Code eklendi -->
<li><a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>: Microsoft tarafından geliştirilen, genişletilebilir ve ücretsiz bir kod editörü.</li>
</ul>
<h3 class="card-title">Sizin Kullanabileceğiniz Diğer Editörler</h3>
<ul>
<li><a href="https://www.jetbrains.com/phpstorm/" target="_blank">Jetbrains PhP Storm</a>: Öğrenci, öğretmen ve kurumlar için ücretsiz. Form doldurarak edinebilirsiniz.</li>
<li><a href="http://brackets.io/" target="_blank">Brackets</a>: Adobe tarafından geliştirilen ücretsiz bir editör.</li>
<li><a href="https://netbeans.apache.org/" target="_blank">Apache Netbeans</a>: Ücretsiz ve açık kaynak kodlu bir editör.</li>
<li><a href="https://notepad-plus-plus.org/downloads/" target="_blank">Notepad++</a>: Yukarıda bahsedildiği gibi.</li>
</ul>
<h3 class="card-title">Online HTML Editörleri</h3>
<p class="card-text">İnternet bağlantınız varsa, kurulum gerektirmeyen online HTML editörlerini de kullanabilirsiniz. Bazı popüler online editörler şunlardır:</p>
<ul>
<li><a href="https://phcode.dev/" target="_blank">Phoenix</a>: Kullanımı kolay bir online editör.</li>
<li><a href="https://www.tiny.cloud/" target="_blank">TinyMCE</a>: WYSIWYG (What You See Is What You Get) editör.</li>
<li><a href="https://jsfiddle.net/" target="_blank">JSFiddle</a>: JavaScript ve HTML kodlarını test etmek için ideal bir online editör.</li>
</ul>
<h2 class="card-title">W3Schools</h2>
<p class="card-text">HTML, CSS ve JavaScript gibi web programlama dilleri hakkında bilgi edinmek için <a href="https://www.w3schools.com/html/" target="_blank">W3Schools</a>’u kullanabilirsiniz. W3Schools, interaktif alıştırmalar ve örnekler içeren ücretsiz bir web sitesidir.</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<div class="card border-success">
<div class="card-body">
<h2>Ekampüs Canlı Ders Etkinliğinde Anlatılan Temel HTML Kodları</h2>
<div class="accordion" id="accordionExample">
<!-- 1. Temel Yapı -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
1. Temel Yapı
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<!-- İçerik burada -->
<div class="accordion-body">
<table class="table">
<tr>
<td><!DOCTYPE html></td>
<td>(HTML belgesinin başlangıcı)</td>
</tr>
<tr>
<td><html></td>
<td>(HTML belgesinin HTML kısmının başlangıcı)</td>
</tr>
<tr>
<td><head></td>
<td>(Belgenin başlık ve meta verileri içeren kısmı)</td>
</tr>
<tr>
<td><title></td>
<td>(Belgenin başlığı)</td>
</tr>
<tr>
<td><meta charset="UTF-8"></td>
<td>(Karakter kodlaması)</td>
</tr>
<tr>
<td></head></td>
<td>(Belgenin başlık ve meta verileri içeren kısmının sonu)</td>
</tr>
<tr>
<td><body></td>
<td>(Belgenin gövde kısmı)</td>
</tr>
<tr>
<td><h1></td>
<td>(Başlıklar, büyükten küçüğe)</td>
</tr>
<tr>
<td><p></td>
<td>(Paragraf)</td>
</tr>
<tr>
<td><img src="resim_adi.jpg" alt="Resim"></td>
<td>(Resim ekleme)</td>
</tr>
<tr>
<td><a href="link.html"></td>
<td>(Link ekleme)</td>
</tr>
<tr>
<td></body></td>
<td>(Belgenin gövde kısmının sonu)</td>
</tr>
<tr>
<td></html></td>
<td>(HTML belgesinin sonu)</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 2. Metin Biçimlendirme -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2. Metin Biçimlendirme
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<table class="table">
<tr>
<td><strong></td>
<td>(Metni kalınlaştırır)</td>
</tr>
<tr>
<td><em></td>
<td>(Metni italik yapar)</td>
</tr>
<tr>
<td><br></td>
<td>(Satır sonu ekler)</td>
</tr>
<tr>
<td><hr></td>
<td>(Yatay çizgi ekler)</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 3. Listeler -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3. Listeler
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<table class="table">
<tr>
<td><ul></td>
<td>(Sırasız liste)</td>
</tr>
<tr>
<td><li></td>
<td>(Liste öğesi)</td>
</tr>
<tr>
<td></ul></td>
<td>(Sırasız liste sonu)</td>
</tr>
<tr>
<td><ol></td>
<td>(Sıralı liste)</td>
</tr>
<tr>
<td><li></td>
<td>(Liste öğesi)</td>
</tr>
<tr>
<td></ol></td>
<td>(Sıralı liste sonu)</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 4. Tablolar -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
4. Tablolar
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<table class="table">
<tr>
<td><table></td>
<td>(Tablo başlangıcı)</td>
</tr>
<tr>
<td><tr></td>
<td>(Tablo satırı)</td>
</tr>
<tr>
<td><th></td>
<td>(Başlık hücresi)</td>
</tr>
<tr>
<td><td></td>
<td>(Veri hücresi)</td>
</tr>
<tr>
<td></tr></td>
<td>(Tablo satırı sonu)</td>
</tr>
<tr>
<td></table></td>
<td>(Tablo sonu)</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 5. Formlar -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
5. Formlar
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">
<table class="table">
<tr>
<td><form></td>
<td>(Form başlangıcı)</td>
</tr>
<tr>
<td><input type="text"></td>
<td>(Metin girişi)</td>
</tr>
<tr>
<td><input type="submit"></td>
<td>(Gönder düğmesi)</td>
</tr>
<tr>
<td></form></td>
<td>(Form sonu)</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<div class="card">
<div class="card-header1">
<h3 class="card-title">Erdem Erdoğdu Hocamız ile Yapılan Projeler</h3>
</div>
<div class="card-body">
<p><i class="fas fa-code"></i> <a href="http://ahmetc.byethost15.com/index.php" target="_blank">Projemiz 1</a> - Web tasarım ve kodlama projesi.</p>
<p>Projenin temel konusu, ücretsiz hosting ve alan adı sağlayan servislerden birini kullanarak,
basit bir web sayfası geliştirmektir. Sayfamız, bu proje kapsamında geliştirilen örnek bir
uygulamadır.
</p>
<p><i class="fa-brands fa-wordpress-simple"></i> <a href="https://ahmetccom.wordpress.com/" target="_blank">Projemiz 2</a> - WordPress üzerine kurulu bir blog sayfası.</p>
<p><i class="fas fa-user-tie"></i> Akademik profil: <a href="https://avesis.anadolu.edu.tr/erdeme" target="_blank">Erdem Erdoğdu</a></p>
</div>
<div class="row mt-3">
<div class="col">
<div class="card">
<div class="card-header1">
<h3 class="card-title">Mehmet Fırat Hocamızın Desteği ile Üretim Takip Sistemi Projesi</h3>
</div>
<div class="card-body">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/qTHn5DQb5Qw" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="max-width: 100%; border: none;"></iframe>
<p>Üretim süreçlerinin verimliliğini artırmak için PHP, MySQL ve JavaScript kullanarak geliştirmeye çalıştığım Üretim Takip Sistemi. İlgi ve Desteği için <strong>Mehmet Fırat</strong> hocama sonsuz teşekkürler.</p>
<p><i class="fa-brands fa-webflow"></i> <a href="https://www.youtube.com/watch?v=qTHn5DQb5Qw" target="_blank">Projemiz 3</a> - YouTube'da bir eğitim videosu.</p>
<p><i class="fas fa-user-tie"></i> Akademik profil: <a href="https://avesis.anadolu.edu.tr/mfirat" target="_blank">Mehmet Fırat</a></p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">HTML Kodlarının Gösterimi</h3>
</div>
<div class="card-body">
<p class="card-text">Projemiz kapsamında kullanılan HTML kodlarının detaylı görünümü. Kodları incelemek ve web sayfamızın nasıl oluşturulduğunu öğrenmek için aşağıdaki bağlantıya tıklayın.</p>
<a href="kod_kacis.html" target="_blank" class="btn btn-primary">Kodları Görüntüle</a>
</div>
</div>
</div>
</div>
<footer class="footer mt-5">
<div class="container">
<div class="row">
<div class="col text-center">
<h2><i class="fas fa-info-circle"></i> Hocamız Hakkında</h2>
<p>Can Güler hocamız, Anadolu Üniversitesi Eğitim Fakültesi Hayat Boyu Öğrenme ve Yetişkin Eğitimi bölümünde Dr. Öğretim Üyesi olarak görev almaktadır.<br> <a href="https://avesis.anadolu.edu.tr/canguler" target="_blank">Daha fazla bilgi</a>.</p>
<!-- Sosyal Medya İkonları (Eğer varsa) -->
<div>
<a href="https://twitter.com" target="_blank" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="https://facebook.com" target="_blank" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="https://instagram.com" target="_blank" class="social-icon"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</footer>
<div class="card my-3">
<div class="card-body">
<h5 class="card-title text-center">Yorumlar</h5>
<p class="card-text text-center">Bu alanda düşüncelerinizi paylaşabilirsiniz.</p>
<!-- Hyvor Talk yorum sistemi -->
<script async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
<hyvor-talk-comments website-id="10594" page-id=""></hyvor-talk-comments>
</div>
</div>
<div id="formKismi" class="row mt-3">
<div class="row">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-center">Bu Sayfa Hakkında</h5>
<p class="card-text text-center">
Bu web sayfası, insan ve teknolojiyi bir araya getirme vizyonuyla tasarlanmıştır.
Sorularınız veya önerileriniz varsa, <a href="mailto:ac426@aof.anadolu.edu.tr" class="link-primary">bana ulaşmak için bu linke</a> tıklayabilirsiniz.
Chatgpt için <a href="https://openai.com/" class="link-primary">open ai web sitesini ziyaret edin</a>.
</p>
<div class="text-center mt-4">
<i class="fas fa-envelope-open-text fa-2x"></i> <!-- Burada FontAwesome ikonu ekledim -->
<p class="font-weight-bold mt-2">FORMU doldurarak Resim Alanına Mesajınızı ekleyebilirsiniz</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<form id="modalKullaniciFormu">
<div class="mb-3">
<label for="name" class="form-label">Ad</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="surname" class="form-label">Soyad</label>
<input type="text" class="form-control" id="surname" name="surname" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Mesaj</label>
<textarea class="form-control" id="message" name="message" rows="3" required></textarea>
</div>
<!-- Buton, form içine taşındı -->
<button type="submit" class="btn btn-primary mt-auto">Gönder</button>
</form>
</div>
</div>
</div>
<div class="container mt-5 ">
<div class="row">
<div class="col">
<h2 class="text-center">Kullanılan Teknikler ve Teknolojiler</h2>
<p class="text-center" >Bu web sayfasının oluşturulmasında aşağıdaki teknikler ve teknolojiler kullanılmıştır:</p>
<ul>
<li><strong>HTML5:</strong> Sayfanın temel yapısını oluşturmak için kullanılmıştır.</li>
<li><strong>CSS3 ve Bootstrap 5:</strong> Sayfanın stilini ve duyarlı tasarımını sağlamak için kullanılmıştır.</li>
<li><strong>MySQL:</strong> Kullanıcı verilerini saklamak ve yönetmek için kullanılan ilişkisel veritabanı yönetim sistemidir.</li>
<li><strong>JavaScript ve jQuery:</strong> Dinamik içerikler ve kullanıcı etkileşimleri için kullanılmıştır.</li>
<li><strong>particles.js:</strong> Arka planda parçacık efektleri oluşturmak için kullanılmıştır. Bu kütüphane, ziyaretçilere görsel bir çekicilik katmak amacıyla kullanılmıştır.</li>
<li><strong>FontAwesome:</strong> İkonlar için kullanılmıştır.</li>
<li><strong>Google Fonts:</strong> Sayfa yazı tipleri için kullanılmıştır.</li>
<li><strong>Hyvor Talk:</strong> Yorum bölümü için bir üçüncü taraf hizmeti kullanılmıştır.</li>
<li><strong>PHP (örnek AJAX çağrıları için):</strong> Kullanıcı mesajlarını kaydetmek ve göstermek için kullanılan sunucu tarafı script dili.</li>
<li><strong>Responsive Tasarım:</strong> Sayfanın mobil ve tablet cihazlarda uygun görüntülenebilmesi için düzenlenmiştir.</li>
<li><strong>Bootstrap Modal ve Collapse Komponentleri:</strong> İçeriklerin modüler ve çökertilebilir şekilde sunulması için kullanılmıştır. Bu sayede kullanıcı deneyimi geliştirilmiştir.</li>
<li><strong>AJAX:</strong> Sayfa yenilenmeden veri alışverişini sağlamak için kullanılmıştır. Bu, örneğin, kullanıcı mesajlarının dinamik olarak kaydedilip gösterilmesi gibi işlemlerde kullanılmıştır.</li>
<li><strong>Scroll Efekti:</strong> Sayfa içindeki belirli bölümlere yumuşak geçişler sağlamak için jQuery'nin scroll özelliği kullanılmıştır.</li>
</ul>
<p class="text-center">Bu teknolojiler ve efektler, kullanıcıya modern ve etkileşimli bir web deneyimi sunmak için bir araya getirilmiştir.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap ve Font Awesome JS dosyaları -->
<!-- jQuery kütüphanesi -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
$(document).ready(function() {
fetchUsers();
$('#modalKullaniciFormu').on('submit', function(e) {
e.preventDefault(); // Formun varsayılan gönderimini engelle
var formData = {
name: $('#name').val(), // input'un name özelliğine göre değer al
surname: $('#surname').val(),
message: $('#message').val()
};
// AJAX isteğini burada yapıyoruz
$.ajax({
type: "POST",
url: "save_user.php",
data: formData, // Yukarıda oluşturduğumuz formData nesnesini kullan
success: function(response) {
// Başarılı bir kayıttan sonra kullanıcıları tekrar çekiyoruz
fetchUsers();
// Formu sıfırlıyoruz
$('#modalKullaniciFormu').trigger("reset");
// Kullanıcıya mesaj gösteriyoruz
alert("Mesajınız kaydedildi.");
},
error: function(jqXHR, textStatus, errorThrown) {
// Hata oluşursa kullanıcıya hata mesajı gösteriyoruz
console.error("Hata: ", textStatus, errorThrown);
alert("Mesaj kaydedilirken bir hata oluştu.");
}
});
});
function fetchUsers() {
$.ajax({
type: "GET",
url: "fetch_users.php",
success: function(response) {
var users = JSON.parse(response); // response'ı JSON formatına dönüştür
var kayanYaziBar = $('#kayanYaziBar');
kayanYaziBar.empty();
var kayanYaziContainer = $('<div class="kayan-yazi-container"></div>');
// Veritabanından dönen kullanıcıları ters sırayla döngüye al
users.reverse().forEach(function(user) {
kayanYaziContainer.append('<span class="kayan-yazi">' + user.kullanici_adi + ': ' + user.mesaji + ' </span>');
});
kayanYaziBar.append(kayanYaziContainer);
},
error: function() {
alert("Kullanıcı mesajları yüklenirken bir hata oluştu.");
}
});
}
});
</script>
</body>
</html>