WebGL ve A-Frame İle Web Tabanlı VR Oyunları Geliştirme

WebGL ve A-Frame İle Web Tabanlı VR Oyunları Geliştirme

WebGL ve A-Frame, web tabanlı uygulamalar ve oyunlar için kullanılan 3D grafik araçlarıdır WebGL açık kaynaklı bir API'dir ve tarayıcılar üzerinde üç boyutlu grafikler oluşturma imkanı sağlar Bunun yanı sıra, A-Frame çerçeve framework olarak kullanılan bir kütüphanedir ve WebGL tabanlı uygulamalar için HTML ile kodlama yaparken VR özelliklerini eklemeye olanak tanır Bu iki araç, VR oyunları ve uygulamaları geliştirmek için önemli araçlardır A-Frame ile, kullanıcı deneyimleri interaktif hale getirilebilir ve farklı cihaz, platform ve web tarayıcılarında çalışabilirler A-Frame kurulumu ise, oldukça basittir ve web tarayıcısı üzerinde çalışır

WebGL ve A-Frame İle Web Tabanlı VR Oyunları Geliştirme

WebGL, web tabanlı uygulamalar ve oyunlar geliştirmek için kullanılan bir 3D grafik API'sidir. Ayrıca, kullanıcıların 3D grafiklerdeki nesneleri ve sahneleri etkileşimli olarak deneyimlemesine olanak tanır. Öte yandan A-Frame ise, WebGL tabanlı uygulamaları geliştirmek için bir çerçeve (framework) olarak kullanılan açık kaynaklı bir kütüphanedir. A-Frame, kullanıcıların web sayfasında HMTL ile kodlama yaparken WebVR özellikleri eklemesine olanak sağlar.

Bu iki araç, web tabanlı VR oyunları geliştirmek için oldukça uygun seçeneklerdir. WebGL, kullanıcı deneyimleri oluşturmak için çok önemli bir teknolojidir. Bu teknoloji, gerçek hayatta olabilecek hareketleri ve davranışları sanal dünyalarda da yapabilir hale getirir. A-Frame ise, bu deneyimlerin web üzerinde daha hızlı ve kolay bir şekilde gerçekleştirilmesini sağlar.

WebGL ve A-Frame, web tabanlı VR oyunları geliştirirken temel araçlardır. Bu çiftin kullanımı, sanal dünya için farklı sahneler, modeller, efektler ve ışıklandırmalar oluşturmak için kullanılan WebGL Shader'leri ile zenginleştirilebilir. Bunun yanı sıra, geliştirilen VR oyunları, farklı cihazlar, platformlar ve web tarayıcılarında görüntülenebilir. Dolayısıyla, teknolojinin gelişmesi ve her geçen gün yeni uygulamaların ortaya çıkmasıyla birlikte web tabanlı VR oyunları da daha popüler hale gelmektedir.


WebGL Nedir?

WebGL (Web Graphics Library); web tarayıcılarında üç boyutlu grafikler oluşturmak ve göstermek için kullanılan bir açık kaynaklı API'dir. WebGL, OpenGL ES 2.0'ın web için uyarlanmış bir sürümüdür ve JavaScript ile web sayfalarında etkileşimli 3D grafikler oluşturma imkanı sağlar. Bu teknoloji sayesinde tarayıcılar, donanım hızlandırma özelliğini (GPU) kullanarak yüksek performanslı 3D grafikler sunarlar.

  • WebGL, tarayıcılar üzerinde çalışan bazı oyunlar ve uygulamalar için ek bir eklenti veya yazılım yüklemeden doğrudan tarayıcı üzerinden çalıştırılabilir.
  • WebGL teknolojisi, web tabanlı VR oyunları ve uygulamalarının geliştirilmesinde önemli bir rol oynar.
  • WebGL'in bir diğer avantajı, birden çok cihazda ve platformda çalışabilmesidir. Bu, geliştiricilerin, çok sayıda kullanıcının farklı cihazlar ve platformlar arasında oyunlarını oynayabilmesini sağlamalarına izin verir.

WebGL teknolojisi, web geliştiricilerine, uygulamaların ve oyunların tarayıcı üzerinden herhangi bir yazılımın kurulmadan çalıştırılmasına imkan tanır.


A-Frame Nedir?

A-Frame, açık kaynaklı bir web tabanlı sanal gerçeklik (VR) çerçevesidir. A-Frame, kullanıcılara VR deneyimleri oluşturma konusunda birçok kolaylık sağlar. A-Frame ile, web geliştiricileri VR oyunları, interaktif sanal turlar, eğitim materyalleri ve daha birçok şey tasarlayabilirler.

Birçok A-Frame bileşeni mevcuttur, bu nedenle kullanıcılar tasarım sürecindeki ihtiyaçlarına ve beklentilerine uygun component'leri ekleyebilirler. A-Frame ile VR deneyimleri, tıpkı 2D web sayfaları veya mobil uygulamalar gibi tasarlanabilir.

A-Frame, aynı zamanda farklı mobil cihazlar, masaüstü bilgisayarlar ve hatta sanal gerçeklik başlıkları arasında kusursuz bir şekilde çalışabilen cross-platform bir çözümdür. Bu, herhangi bir cihazda çalışan ve erişilebilir olan VR deneyimleri oluşturma konusunda geliştiricilere üstün bir esneklik sağlar.

A-Frame ile birlikte kullanılabilecek birçok farklı araç ve kütüphane mevcuttur. Bu araçlar, web geliştiricilerinin VR projesi oluştururken işlerini kolaylaştırmaya yardımcı olur. Ayrıca, A-Frame'e kolayca entegre edilebilen üçüncü taraf araçlar ve kütüphaneler de mevcuttur, bu da geliştiricilerin VR deneyimlerini daha da geliştirmelerine olanak tanır.


A-Frame Kurulumu

A-Frame, web tabanlı VR projeleri geliştirirken kullanılan bir framework'tür. A-Frame kurulumu oldukça basittir ve web tarayıcısı üzerinde çalışır. A-Frame ile VR projeleri geliştirebilmek için öncelikle A-Frame kütüphanesinin indirilmesi gerekiyor.

Bunun yanı sıra, bir metin editörü ve bir web sunucusuna ihtiyacınız olacaktır. Biz bu örnekte, Visual Studio Code editörünü ve Live Server sunucusunu kullanacağız. Visual Studio Code editörünü bilgisayarınıza indirin ve Live Server Eklentisini yükleyin.

Aşağıdaki adımları takip ederek A-Frame kurulumunu kolayca gerçekleştirebilirsiniz:

Adım 1: Visual Studio Code editör yönetici hesabıyla açın
Adım 2: Visual Studio Code açıkken "Explorer" penceresinden "New Folder" seçeneği ile bir proje klasörü oluşturun
Adım 3: Klasöre sağ tıklayarak "Open with Code" seçeneğini seçin
Adım 4: Visual Studio Code editöründe "Terminal" penceresini açın
Adım 5: Aşağıdaki komutu girin: "npm install -g live-server"
Adım 6: "New File" seçeneği ile index.html dosyasını oluşturun
Adım 7: index.html dosyasının içine aşağıdaki kodu ekleyin:
    A-Frame Kurulumu                      

A-Frame kurulumu tamamlandıktan sonra, artık VR projesi oluşturabilir ve Live Server kullanarak projenizi tarayıcınızda görüntüleyebilirsiniz.


HTML Dosyasının Oluşturulması

A-Frame ile VR projesi geliştirme işlemine başlamak için gerekli olan HTML dosyası, bir text editör programı ile açılarak oluşturulabilir. Bu dosya içerisinde A-Frame kütüphanelerinin çağrılması ve sıfırdan oluşturulacak olan VR dünyasının elemanlarının tanımlanması yer alır.

HTML dosyasında, ilk olarak tanımı ve etiketleri yer almalıdır. Ardından, etiketi altında ya da sayfanın en üst kısmında yer alacak olan </code></b> etiketi ile VR projesi için belirtilen başlık bilgisi tanımlanır.</p><p>Sonrasında, <b><code><body></code></b> etiketi ile VR oyununda görüntülenecek olan tüm öğelerin yer aldığı sayfa içeriği oluşturulur. A-Frame etiketleri bu bölümde kullanılarak VR dünyasının elemanları yerleştirilir. Örneğin, <b><code><a-scene></code></b> etiketi kullanarak 3B görünüm sağlayan alanlar oluşturulur. Ayrıca, diğer class tanımları ve özellikleri ile birlikte objelerin boyut ve özellikleri belirtilir.</p><p>Özetle, HTML dosyası A-Frame kütüphanelerinin çağrılmasını, VR dünyasının elemanlarına yer verilmesini ve özelliklerinin belirlenmesini içerir. Bu şekilde hazırlanan HTML dosyası, WebGL ve A-Frame teknolojileri kullanılarak VR oyunu geliştirmek için temel bir çerçeve sunar.</p><br /><h4>Temel A-Frame Özelliklerinin Kullanımı</h4><p>Temel A-Frame özellikleri, VR projeleri geliştirirken oldukça kullanışlıdır. Bu özellikler, VR kullanıcı deneyimini geliştirirken daha etkili bir şekilde kullanılabilir. Bunlar arasında, aşağıdaki başlıklar önemlidir:</p><ul> <li><b>entity:</b> A-Frame içerisinde en önemli elementtir. Camera'dan tutun da, tüm objeleri entityler yardımıyla oluşturmak mümkündür.</li> <li><b>position: </b>Objelerin konumları positioning yapısıyla sağlanır. X, Y ve Z koordinatlarıyla objelerin pozisyonu belirlenebilir. Ayrıca, bu koordinatlar dynamic olarak da değiştirilebilir.</li> <li><b>rotation: </b> Rotation yapısı sayesinde objeler depth ve angle değişimleri ile VR kullanıcılarının etrafında dönebilir veya sabit kalabilirler.</li> <li><b>material: </b> Bu özellik objelerin rengini, opasitesini ve yüzeylerini belirtmek için kullanılır. Bu, kullanıcıların objeleri daha iyi görmelerine olanak tanır.</li> <li><b>geometry: </b> Geometri özellikleri, objelerin şekillerini ve boyutlarını belirlemek için kullanılır. Bu özellik, VR içerik yaratıcılarının objelerin 3D formlarını inşa etmelerine olanak tanır.</li> <li><b>animation: </b> Animasyon özellikleri, objelerin kullanıcı hareketlerine yanıt vermelerini sağlar. Bu özellik, VR kullanıcı deneyimini geliştirerek hareketli objeler yaratmaya olanak tanır.</li></ul><p>Temel A-Frame özelliklerinin nasıl kullanılacağına ilişkin bir örnek, hareketli bir küpün oluşturulmasıdır. Entity tag'i ile küp oluşturulabilir ve ardından animation tag'i ile objenin hareket etmesi için animasyon eklenir. Bu, VR oyunları geliştirirken kullanıcının hareketliliğini ve etkileşimini artırarak kullanıcı deneyimini daha gerçekçi bir hale getirir.</p><br /><h4>WebGL ve A-Frame ile VR Oyunu Geliştirme Adımları</h4><p>WebGL ve A-Frame ile VR oyunu geliştirmenin temel adımları şu şekildedir:</p><ul><li><b>Adım 1: Tasarım Planlama ve Konsept Oluşturma</b></li><p>Her oyun geliştirme sürecinde olduğu gibi, ilk adım bir tasarım planı oluşturmaktır. Bu plan, oyunun konseptini, hikayesini, karakterlerini, ortamını ve oyun dinamiklerini içerir. Konsept hazırlandıktan sonra, tasarım haritası ve kılavuzları oluşturmak önemlidir.</p><li><b>Adım 2: A-Frame Kurulumu</b></li><p>Öncelikle A-Frame'in nasıl kurulacağına bakalım. A-Frame, HTML, JavaScript ve CSS kullanarak VR deneyimleri oluşturmanıza izin veren bir kütüphanedir. Kurulumu oldukça basittir, projenizde A-Frame kullanmak için sadece birkaç satır kod yazmanız gerekiyor.</p><li><b>Adım 3: Scene Oluşturma</b></li><p>A-Frame ile VR projesi için sahne oluşturmanın ilk adımı, bir web sayfasına A-Frame kütüphanesini eklemektir. Daha sonra, Three.js ile oluşturulmuş 3D objelerin eklenmesiyle bir sahne oluşturulur.</p><li><b>Adım 4: 3D Objelerin Eklenmesi</b></li><p>VR oyununda kullanılacak olan 3D modellerin ve objelerin oluşturulması gerekiyor. Blender, Maya ve 3ds Max gibi programlarla karşımıza çıkan 3D grafik yazılımları ile modeller oluşturulabilir. Bu modellerin işlenmesi ve değiştirilmesi de mümkündür.</p><li><b>Adım 5: Animasyonların Eklenmesi</b></li><p>A-Frame, bazı basit hareketlerin oluşturulması için önceden tanımlanmış bileşenlerin bir koleksiyonunu sunar. Bu bileşenler, nesnelerin renklerini, pozisyonlarını ve boyutlarını değiştirmek gibi işlemleri işaretleyebilir, böylece nesneler hareket eder veya değişir.</p><li><b>Adım 6: Kullanıcı Etkileşimi</b></li><p>VR oyunları, kullanıcının sanal ortamda etkileşimde bulunabileceği bir oyun deneyimidir. Kullanıcının yaptığı hareketler ve seçimler, oyunun sonucunu etkiler. Bu nedenle, kullanıcı etkileşimi için A-Frame’in hareket ve etkileşim bileşenleri kullanılır.</p><li><b>Adım 7: Kaynakların Optimizasyonu</b></li><p>WebGL ve A-Frame kullanarak bir VR oyunu geliştirirken, kaynakların optimizasyonu oldukça önemlidir. Dosya boyutları, VR oyununun performansını doğrudan etkiler. Çok fazla kaynak kullandığınızda, oyununuz düzgün şekilde çalışmayabilir.</p><li><b>Adım 8: İletişim ve Test Etme</b></li><p>VR oyununuzu tamamladıktan sonra, oyunu test edin ve neleri iyileştirebileceğinizi görün. Oyununuza geri bildirim almak ve kullanıcıların görüşlerini öğrenmek için Beta sürümünü yayınlayabilirsiniz. Son olarak, VR oyununuzu yayınlamadan önce, çevrimiçi platformlarda test edin ve kullanıcılardan geri bildirim alın.</p></ul><br /><h4>Modelleme ve Animasyon Oluşturma</h4><p>VR oyunlarındaki heyecan verici dünyalar modelleme ve animasyon yaratıcılarına birçok fırsat sunar. WebGL ve A-Frame, bu sanat eserlerinin web tabanlı VR oyunlarına entegre edilmesine olanak tanır. </p><p>Modelleme ve animasyon oluşturmanın ilk adımı, VR projesinde yer alacak nesnelerin tasarımını yapmaktır. 3B modelleme yazılımları, örneğin Blender, Maya veya 3D Studio Max ile bu adım gerçekleştirilebilir. Bu yazılımların birçoğu ücretsiz seçenekler de sunmaktadır.</p><p>Modelleme esnasında, nesnelerin detayları, boyutları ve diğer özellikleri ile ilgili ayrıntılı bir çalışma yapmak önemlidir. Bu, nesne oluşturulduktan sonra düzenlemelerin yapılmasını sağlayacaktır. Nesne oluşturma işlemi tamamlandıktan sonra, A-Frame için uygun bir formata dönüştürmek için farklı dosya formatlarının incelenmesi gerekebilir. </p><p>Bir diğer önemli konu ise VR animasyonlarının tasarlanmasıdır. Animasyonlar, web tabanlı VR oyunlarında hareketi ve etkileşimleri sağlar. Animasyonlar, çeşitli donanım ve yazılım özelliklerinin desteği ile oluşturulabilir. Animasyonların yaratılması için birçok farklı araç, örneğin Unity's meşhur otomatik animasyon sistemi, mevcuttur. </p><p>A-Frame için uygun dosya formatına dönüştürüldükten sonra ve VR animasyonları yaratıldıktan sonra, bu nesneler WebGL ile birlikte bir oyun alanına yerleştirilebilir. WebGL, 3 boyutlu grafiklerin web tarayıcılarından sorunsuz bir şekilde çalıştırılmasını sağlar. Böylece, kullanıcının VR deneyimi mükemmel bir şekilde gerçekleşir. </p> <p>Bir sonraki adım, oluşturulan VR oyununun test edilmesidir. Herhangi bir problem var mı, yok mu görmek için test edilmelidir. Son olarak, oyun web tabanlı platformlarda paylaşılarak kullanıcılar tarafından oynanabilir hale getirilmelidir. </p> <p>Modelleme ve animasyon tasarımı, web tabanlı VR oyunlarının temel yapı taşlarıdır. Bu adımları takip ederek, etkileyici bir web tabanlı VR oyunu tasarlayabilirsiniz.</p><br /><h4>WebGL Shader'lerinin Kullanımı</h4><p>Bir WebGL shader, üç boyutlu grafikler ve görsel efektler oluşturmak için kullanılan bir programdır. Shader'ler ışıklandırmayı, gölgeleri ve malzeme yüzeylerini değiştirmeye yardımcı olur. WebGL shader'leri, VR oyunları oluşturmanın önemli bir parçasıdır.</p><p>Bir VR oyunda kullanılan shader'ler, üç boyutlu varlıkların görüntülenmesini kontrol edebilir. Örneğin, malzemelerin yansımasını, saydamlığını ve yüzeylerin pürüzlülüğünü ayarlamak mümkündür. Shader'ler, oyuncunun hareketleri, objelerin hareketleri veya turuncu yanan bir güneşin doğuşu gibi farklı senaryolara göre manipüle edilebilir.</p><table> <tr> <th>Shader Örnekleri</th> <th>Kullanım Alanları</th> </tr> <tr> <td>Phong Shader</td> <td>Işıklandırma efektleri ve malzeme yüzeyleri</td> </tr> <tr> <td>Bump Mapping Shader</td> <td>Pürüzlü yüzeylerin oluşturulması</td> </tr> <tr> <td>Normal Mapping Shader</td> <td>Pürüzlü yüzeylerin daha detaylı oluşturulması</td> </tr></table><p>Phong shader'ı, materyal yüzeylerindeki yansıma, parlaklık ve karışıklığı kontrol etmek için kullanılır. Bump Mapping shader'ı, objelerin yüzeylerini kabartmak için kullanılır. Normal Mapping, yüksek detaylı pürüzlü yüzeyler oluşturmak için bump mapping shader'larından daha gelişmiş bir kullanım sağlar.</p><p>Shader'ler ve diğer grafik programlama araçları, VR oyunları geliştirirken önemlidir. Bu nedenle, WebGL ve A-Frame'in yanı sıra shader'lerin nasıl kullanılacağı ve farklı özelliklerle nasıl manipüle edileceği öğrenmek gerekir.</p><br /><h4>Çevrimiçi İçerik Yayınlama ve Paylaşma</h4><p>Bir VR oyunu geliştirdikten sonra, oyuncularla paylaşmanın birkaç farklı yolu vardır. İlk seçenek, oyununuzu kendi web sitesinde barındırmaktır. Bu şekilde, kullanıcılar oyunu doğrudan web sitenizden oynamak için tarayıcılarına erişebilirler.</p><p>Bir diğer seçenek, popüler bir VR platformunda oyununuzu paylaşmaktır. Örneğin, Oculus, HTC Vive ve PlayStation VR gibi platformlar, geliştiricilere oyunlarını bu platformlarda yayınlamalarına izin vermektedir. Bu platformlarda oyununuzun popülerlik kazanması için birçok farklı faktör vardır, ancak ilk adım olarak oyununuzu ilgili platformun geliştirici portalına yüklemeniz gerekir.</p><p>Ayrıca, VR oyunlarınızı popüler oyun platformlarında da yayınlayabilirsiniz. Örneğin Steam'de bir geliştirici hesabı açarak veya Google Play Store veya App Store'da bir mobil uygulama olarak yayınlayarak oyunculara daha geniş bir kitleye ulaşabilirsiniz.</p><p>Geliştirilen VR oyununuzun tanıtımı için birkaç farklı pazarlama aracı kullanabilirsiniz. Oyun tanıtımı için sosyal medya platformlarından yararlanabilirsiniz veya VR oyunları hakkında bilgi paylaşan bloglara konuk yazar olabilirsiniz. Ayrıca reklam kampanyaları da yapabilirsiniz, örneğin Google AdWords kullanarak hedeflenmiş reklamlar oluşturabilirsiniz.</p></p> </div> <div class="entry-footer"> <div class="post-tags"><span class="entry-footer__title">Etiketler:</span> <ul class="list-tags list-tags_grey list-unstyled"> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="WebGL" href="arama-sonuclari.html?mod=4&ara=WebGL">WebGL</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="3D grafik" href="arama-sonuclari.html?mod=4&ara=3D+grafik">3D grafik</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="API" href="arama-sonuclari.html?mod=4&ara=API">API</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="interaktif deneyim" href="arama-sonuclari.html?mod=4&ara=interaktif+deneyim">interaktif deneyim</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="A-Frame" href="arama-sonuclari.html?mod=4&ara=A-Frame">A-Frame</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="VR" href="arama-sonuclari.html?mod=4&ara=VR">VR</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="çerçeve" href="arama-sonuclari.html?mod=4&ara=çerçeve">çerçeve</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="açık kaynaklı" href="arama-sonuclari.html?mod=4&ara=açık+kaynaklı">açık kaynaklı</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="HTML" href="arama-sonuclari.html?mod=4&ara=HTML">HTML</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="WebVR" href="arama-sonuclari.html?mod=4&ara=WebVR">WebVR</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="tarayıcı" href="arama-sonuclari.html?mod=4&ara=tarayıcı">tarayıcı</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="donanım hızlandırma" href="arama-sonuclari.html?mod=4&ara=donanım+hızlandırma">donanım hızlandırma</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="cross-platform" href="arama-sonuclari.html?mod=4&ara=cross-platform">cross-platform</a></li> <li id="mbt" class="list-tags__item"><a id="mbt" class="list-tags__link btn btn-default" title="kurulum" href="arama-sonuclari.html?mod=4&ara=kurulum">kurulum</a></li> </ul> </div> </div> </div> </article> <!-- end .post--> <!-- end .section-comment--> <!-- end .section-reply-form--> </div> </div> </div> <div class="col-md-4"> <aside class="l-sidebar col_mrg-left_20"> <section class="widget section-sidebar"> <h2 class="widget-title ui-title-inner ui-title-inner_condensed"><span class="ui-title-inner__inner">Kategoriler</span></h2> <div class="widget-content"> <ul class="widget-list list list-mark-4"> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-935149-Web-Yazilim-Eticaret.html">Web - Yazılım - Eticaret</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-224447-Tip-Saglik.html">Tıp & Sağlık</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-609805-Evren-Yaratilis-Varolus.html">Evren & Yaratılış & Varoluş</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-640669-Teknolojiler.html">Teknolojiler</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-903149-Fizik-Kimya-Biyoloji.html">Fizik & Kimya & Biyoloji</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-700485-Spor.html">Spor</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-190961-Egitim.html">Eğitim</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-253601-Danismanlik.html">Danışmanlık</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-618323-Psikoloji-Psikiyatri.html">Psikoloji & Psikiyatri</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-358242-Muhendislik.html">Mühendislik</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-468393-Kodlama-Yazilim-Dilleri.html">Kodlama - Yazılım Dilleri</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-175853-Arsa-Emlak-Insaat.html">Arsa & Emlak & İnşaat</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-153043-Kahve-Yemek-Mutfak.html">Kahve & Yemek & Mutfak</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-637540-Tarih-Sosyal-Bilimler.html">Tarih & Sosyal Bilimler</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-605539-Genel-Kultur.html">Genel Kültür</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-362240-Astroloji.html">Astroloji</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-561991-Icatlar.html">İcatlar</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-482698-Yurtdisi-Egitim-Is-Yatirim.html">Yurtdışı Eğitim - İş - Yatırım</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-368835-Meslekler.html">Meslekler</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-560367-Bilim-Insanlari.html">Bilim İnsanları</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-849471-Sanat-Dallari.html">Sanat Dalları</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-645345-Pazaryerleri.html">Pazaryerleri</a></li> <li class="widget-list__item"><a class="widget-list__link mbt" href="kategori-detay-343966-Sosyal-Medya.html">Sosyal Medya</a></li> </ul> </div> </section> <!-- end .widget--> <div class="widget"><!-- end .b-banner--> </div> <!-- end .widget--> </aside> </div> </div> </div> </div> </div> <footer class="footer"> <!-- <div class="footer__main"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="footer-section"><a class="footer__logo" href="home.html"><img class="img-responsive" src="temalar/infoldia/assets/media/general/logo-footer.png" alt="Logo"/></a> <div class="footer__info"> <p>Lorem ipsum dolor amet consecteu adipisicing sed do eiusmod tempor incididunt labore dolore magna aliqua enimad minim tempor incididunt labore et dolore magna aliqua.</p> </div> <div class="footer__contact"><i class="icon fa fa-location-arrow"></i> 36 Canal Society, Victoria ML 00789</div> <div class="footer__contact"><i class="icon fa fa-phone"></i> +01 234 5678 / 0800 123.9876</div> <div class="footer__contact"><i class="icon fa fa-envelope"></i> contact@domain.com</div> <ul class="social-net list-inline"> <li class="social-net__item"><a class="social-net__link text-primary_h" href="twitter.html"><i class="icon fa fa-twitter"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="facebook.html"><i class="icon fa fa-facebook"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="plus.google.html"><i class="icon fa fa-google-plus"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="youtube-play.html"><i class="icon fa fa-youtube-play"></i></a></li> <li class="social-net__item"><a class="social-net__link text-primary_h" href="rss.html"><i class="icon fa fa-rss"></i></a></li> </ul> </div> </div> <div class="col-md-4"> <section class="footer-section"> <h3 class="footer-section__title ui-title-inner ui-title-inner_condensed"><span class="ui-title-inner__inner">recent posts</span></h3> <section class="b-post b-post_img-left b-post_light b-post_img-100 clearfix"> <div class="entry-media"><a class="js-zoom-images img-hover-effect" href="temalar/infoldia/assets/media/content/posts/100x80/1.jpg"><img class="img-responsive hov-scal" src="temalar/infoldia/assets/media/content/posts/100x80/1.jpg" alt="Foto"/></a></div> <div class="entry-main"> <div class="entry-header"> <h2 class="entry-title"><a href="blog-post.html">Equip exea comodas rue nsew uat duis ipsum</a></h2> <div class="entry-meta"><span class="entry-meta__item"><a class="entry-meta__link" href="blog-main.html"><strong>march 8, 2017</strong></a></span><span class="entry-meta__item"><i class="icon fa fa-comment-o text-primary"></i><a class="entry-meta__link" href="blog-main.html">29</a></span> </div> </div> </div> </section> <section class="b-post b-post_img-left b-post_light b-post_img-100 clearfix"> <div class="entry-media"><a class="js-zoom-images img-hover-effect" href="temalar/infoldia/assets/media/content/posts/100x80/2.jpg"><img class="img-responsive hov-scal" src="temalar/infoldia/assets/media/content/posts/100x80/2.jpg" alt="Foto"/></a></div> <div class="entry-main"> <div class="entry-header"> <h2 class="entry-title"><a href="blog-post.html">Lorem ipsum dolor sit do amet elit spa eiusmod</a></h2> <div class="entry-meta"><span class="entry-meta__item"><a class="entry-meta__link" href="blog-main.html"><strong>june 30, 2017</strong></a></span><span class="entry-meta__item"><i class="icon fa fa-comment-o text-primary"></i><a class="entry-meta__link" href="blog-main.html">14</a></span> </div> </div> </div> </section> <section class="b-post b-post_img-left b-post_light b-post_img-100 clearfix"> <div class="entry-media"><a class="js-zoom-images img-hover-effect" href="temalar/infoldia/assets/media/content/posts/100x80/3.jpg"><img class="img-responsive hov-scal" src="temalar/infoldia/assets/media/content/posts/100x80/3.jpg" alt="Foto"/></a></div> <div class="entry-main"> <div class="entry-header"> <h2 class="entry-title"><a href="blog-post.html">Exercitation ullamco ca laboris nisi ut aliquip ex ea</a></h2> <div class="entry-meta"><span class="entry-meta__item"><a class="entry-meta__link" href="blog-main.html"><strong>august 25, 2017</strong></a></span><span class="entry-meta__item"><i class="icon fa fa-comment-o text-primary"></i><a class="entry-meta__link" href="blog-main.html">14</a></span> </div> </div> </div> </section> </section> </div> <div class="col-md-4"> <section class="footer-section"> <h3 class="footer-section__title ui-title-inner ui-title-inner_condensed"><span class="ui-title-inner__inner">Latest images</span></h3> <div class="owl-carousel owl-theme owl-theme_control-center owl-theme_control-dark enable-owl-carousel" data-pagination="false" data-navigation="true" data-single-item="true" data-auto-play="7000" data-transition-style="fade" data-main-text-animation="true" data-after-init-delay="3000" data-after-move-delay="1000" data-stop-on-hover="true"><img src="temalar/infoldia/assets/media/content/gallery/360x300_1.jpg" alt="foto"/><img src="temalar/infoldia/assets/media/content/gallery/360x300_1.jpg" alt="foto"/><img src="temalar/infoldia/assets/media/content/gallery/360x300_1.jpg" alt="foto"/></div> </section> </div> </div> </div> </div> --> <div class="copyright"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="copyright-list list-inline"> <li class="copyright-list__item"><a class="copyright-list__link" href="kosullar.html">Kullanım Koşulları</a></li> <li class="copyright-list__item"><a class="copyright-list__link" href="gizlilik.html">Gizlilik & Güvenlik</a></li> <li class="copyright-list__item"><a class="copyright-list__link" href="iletisim.html">İletişim</a></li> </ul><span class="copyright__info">© 2024<strong> INFOLDIA</strong> ® Tüm Hakları Saklıdır</span> </div> </div> </div> </div> </footer> </div> <!-- end layout-theme--> <!-- ++++++++++++--> <!-- MAIN SCRIPTS--> <!-- ++++++++++++--> <script src="temalar/infoldia/assets/libs/jquery-1.12.4.min.js"></script> <script src="temalar/infoldia/assets/libs/jquery-migrate-1.2.1.js"></script> <script src="temalar/infoldia/assets/libs/modernizr.custom.js"></script> <!-- Bootstrap--> <script src="temalar/infoldia/assets/libs/bootstrap/bootstrap.min.js"></script> <!-- User customization--> <script src="temalar/infoldia/assets/js/custom.js"></script> <!-- Slider--> <script src="temalar/infoldia/assets/plugins/owl-carousel/owl.carousel.min.js"></script> <!-- Pop-up window--> <script src="temalar/infoldia/assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script> <!-- Headers scripts--> <script src="temalar/infoldia/assets/plugins/headers/jquery.dlmenu.js"></script> <script src="temalar/infoldia/assets/plugins/headers/slidebar.js"></script> <script src="temalar/infoldia/assets/plugins/headers/header.js"></script> <!-- Mail scripts--> <script src="temalar/infoldia/assets/plugins/jqBootstrapValidation.js"></script> <!-- Video player--> <script src="temalar/infoldia/assets/plugins/flowplayer/flowplayer.min.js"></script> <!-- Filter and sorting images--> <script src="temalar/infoldia/assets/plugins/isotope/isotope.pkgd.min.js"></script> <script src="temalar/infoldia/assets/plugins/isotope/imagesLoaded.js"></script> <!-- Progress numbers--> <script src="temalar/infoldia/assets/plugins/rendro-easy-pie-chart/jquery.easypiechart.min.js"></script> <script src="temalar/infoldia/assets/plugins/rendro-easy-pie-chart/waypoints.min.js"></script> <!-- Animations--> <script src="temalar/infoldia/assets/plugins/scrollreveal/scrollreveal.min.js"></script> <!-- Ticker--> <script src="temalar/infoldia/assets/plugins/jquery-easy-ticker/jquery.easy-ticker.min.js"></script> </body> </html>