Bootstrap Dersleri – Giriş

Herkese selamlar! Uzun bir aradan sonra yeniden birlikteyiz. Öncelikle hepinizden özür diliyorum Uzun süredir Blog’da paylaşım olmuyordu. Kendi işlerimden dolayı burayı aksattım. Ama bundan sonra beraberiz inşAllah. Sık sık paylaşımlarımız devam edecek :). Bugün sizlere Bootstrap konusunu anlatmaya çalıştım. Bi kusurum, yanlışım varsa affola. İyi çalışmalar :).

Bootstrap; açık kaynak kodlu, ücretsiz bir CSS frameworktür, tasarım aracıdır. Mobil öncelikli web projeleri geliştirmek için geliştirilmiştir. Yani bir web sitesi yapacaksınız, önceliğiniz mobil web sitesi olacak şekilde planlanmıştır, desktop versiyon web siteleri mobil tasarımdan sonra ikincil olarak düşünülür. Yapı ve temel bu kurgu üzerinde düşünülmüştür.

Bootstrap alt yapısı kullanılarak web arayüzü geliştirme işleri daha hızlı ve kolaydır. Tüm uzmanlık seviyelerindeki geliştiriciler için; her boyda ekranlar ve her boyuttaki projeleri olanlar için geliştirilmiştir.

 

Bootstrap ile tüm cihazlar için kolayca site yapabilirsiniz

Bootstrap ile çok basit bir şekilde telefonlar, tabletler ve masaüstü bilgisayarlar için farklı görüntü elde edebilir ve cihaz büyüklüğüne uygun şekilde sitenizin gözükmesini sağlayan temalar/tasarımlar yapabilirsiniz.bro_responsivedesign_main2

Bootstrap modüler bir şekilde site tasarımı yapabileceğiniz alt yapı sunar

Bir site için gerekli olan tüm elementleri (form ögeleri, etiketler, tablolar, uyarı ve bilgi metinleri, navigasyon bar, sayfalandırma modülü, açılan menüler, farklı özellikte butonlar vb bir çok tasarım ögesini) içinde barındıran Bootstrap tasarım yaparken bu hazır elementleri kullanarak bütün cihazlara uygun tasarımlar geliştirmenize yarar. Yani her şeyi hazır olan kodlarla yeni bir tasarım ortaya koymak çok basit ve pratiktir. Stiller, imajlar , js’ler daha önceden sistemin içine monte edilmiştir. Sizin yapacağınız tek şey ihtiyacınız olan unsurları kodunuz içinde çağırmaktır.

 

Bootstrap tarayıcı desteği

Bootstrap 3.3.5 sürümü, Chrome, Safari, Firefox, Internet Explorer, Opera gibi neredeyse tüm popüler web tarayıcılarının son sürümlerinde sorunsuz çalışıyor.

Evet arkadaşlar bu yazım burada sonlandı. Bundan sonraki yazılarımı Girişimcilik üzerine yoğunlaştırmayı düşünüyorum. Herkese hayırlı günler dilerim. 🙂

Reklamlar

Yeni Girişim Mazi Game Lab Hakkında

Herkese merhabalar. Bugün sizlere yeni kurduğumuz girişim Mazi hakkında biraz bilgi vermek istedim ve bu yazıyı yazdım. Biraz projemizin ne işe yaradığından bahsedelim. Mazı Game Lab; VR, Mobile & Tüm Platformlara Oyun Çözümleri Sunuyor. Konuyu biraz daha açarsak, özellikle VR üzerine yoğunlaşmış bir proje. İşin içine VR girdiği için projeye bu kadar önem veriyorum.

Mazi bünyesinde oyunlarımız/simülasyonlarımız geliştirilmeye devam ediyor. İlk oyun projemizi yakında publish edeceğiz.

Üstelik çok erken olmasına rağmen Mazi Game Lab’ nin yatırım görüşmeleri başladı bile :). İnşallah yatırımımızıda aldıktan sonra yolumuza azimle devam edeceğiz. Mazi web sitesi şu anda yayında değil ancak çok yakında yayına alacağız. Sosyal medya hesaplarımız açıldı;

Facebook; Mazi Game Lab Facebook Adresi.

Bizi sosyal medya hesabımızdan takip ederek Mazi ile ilgili gelişmeleri takip edebilirsiniz :).

Bu günlük yazımız biraz kısa oldu kusura bakmayın, bu aralar çok yoğunum önümüzdeki hafta bomba yazılar geliyor. Takipte kalın! :). Haftaya görüşmek dileğiyle, Hoşçakalın..

Yeni Ürünümüz Klocee Hakkında

Herkese Tekrardan Merhabalar. Bugün sizlerler herhangi bi programlama dili üzerine konuşmayacağız. Bugün şirket olarak yeni ürünümüz Klocee üzerine size biraz bilgi vermek istiyorum. Çünki bu konu hakkında çok sorular geldi.

Öncelikle ürünümüz hakkında biraz bilgi vereyim;

Klocee, Muhasebecilere ve Şirketlere Finansal Yazılım Çözümleri Sunar. İşte Klocee’ nin asıl işi budur. Bazı şirketler finansal olarak bir yazılıma ihtiyaç duyarlar bizde bu açığı gidererek Klocee’ yi piyasaya sunduk. Ve şu anda anlaştığımız birçok yer bulunmakta. Ayrıca Klocee’ yi ön muhasebe yazılımı olarakta görebilirsiniz.

Klocee hakkında birkaç görsel paylaşmak istiyorum:

Bu görselde “Kasa” sekmesi gösterilmiş.

klocee-1

Bu görselde “Banka” sekmesi gösterilmiş.

klocee-2

Bu görselde “Çekler” sekmesi gösterilmiş.klocee-3

Bu görselde “Fatura” sekmesi gösterilmiş.klocee-4

Ayrıca ürünümüzde yeni kullanıcı ekleyebiliyoruz. Ürünümüz hakkında daha fazla bilgi almak isterseniz web sitesini ziyaret edebilirsiniz…

Evet arkadaşlar bugünlük yazımız bu kadar. Sonraki yazımızda görüşmek üzere hoşçakalın…

Sanal Gerçekliğe Oyun Geliştiriyoruz

Tekrardan Merhabalar,

Bu Konuda Pek Türkçe Kaynak Olmadığı İçin Sizi Bu Konuda Aydınlatmak İsterim. Öncelikle Sanal Gerçeklik Gözlüğü Olarak Ben Oculus Rift Üzerinden Anlatacağım. Oculus Rift Destekleyen PC Minimum Fiyatı “4000 TL”. Baştan Söyliyeyim Dedim :).

Şimdi Konuya Geçelim. Unity’ i Bilgisayar’ ınızda Kurlulu Varsayıyorum. Kurulu Değilse Şuradaki Yazımdan Nasıl Kurulacağı Hakkında Bilgi Edinebilirsiniz. Sonrasında Aşağıda Gerekli İndirilecek Dosyaları Paylaşacağım;

  1. Oculus Runtime = Buradan Oculus İçin  Gerekli Olacak Setup Dosyasını İndiriyoruz.
  2. Unity 5 VR Dokümantasyon = Unity’ nin VR İle İlgili Olan Dokümantasyonu.
  3. Oculus Utils = Oculus Tüm Setup Dosyaları.
  4. Oculus Rift Documentation = Bize Lazım Olabilecek Kaynaklardan Olan Oculus Dokümantasyonu.

İlk Olarak Oculus Runtime’ ı Kuruyoruz. Kurulumu Gayet Basittir. Setup Dosyası Olduğu İçin “Next, next, next” Diyerek Kurabilirsiniz.

Oculus Runtime Kurulduktan Sonra Görev Çubuğunda Sağ Alt Köşede Oculus Simgesi Çıkması Gerekiyor. Simgeye Tıklıyoruz. Ve Karşımıza Bir Pencere Açılacak Burada Bazı Ayarlar Yapmamız Gerekiyor: Pencerenin Ortasında User Adında Bir Bölme Var Orda + İşareti Olması Gerekiyor O Simgeye Tıklıyoruz Ve Yeni Kullanıcı Ekliyoruz. Kullanıcı Adınızı Ekledikten Sonra OK Diyorsunuz.

Ana Pencereye Döndüğümüzde Sağ Alt Köşede Advanced Butonuna Tıklıyoruz. Burada Horizontal Vertical Değerleri Var Bunları Test Ederek Kendinize Göre Ayarlayabilirsiniz.Sonrasında OK Diyip Çıkabilirsiniz.

Ana Menüye Tekrar Döndüğümüzde Metric Kutucuğunun Yanında Bir Değer Var Burayı (5’6.1″) Yapabilirsiniz.Ayarları Kendinize Göre Ayarladıktan Sonra Ana Menüde Sol Alt Köşede Show Demo Scene Butonu Var Oraya Tıklarsanız Yaptığınız Değişiklikleri Görüntüleyebilirsiniz. Oculus Editöründe Yapacaklarımız Bu Kadar.

Şimdi Unity’ e Geçelim, Yeni Proje Oluşturalım ve Sahnemize İstediğimiz Şeyleri Ekleyelim. Daha Sonrasında Yukarıdan ” Edit/Project Settings/Player “ Sekmesine Gidiyoruz. Burada Sağda ” Other Settings/Virtual Reality Supported “ Kutusunu Aktif Yapıyoruz.

Evet Arkadaşlar Bu Yazımda Buraya Kadar. Bu Yazı Sayesinde Sizde Artık Sanal Gerçeklik Projeleri Geliştirebileceksiniz. Bir Daha ki Yazımda Görüşmek Üzere Hoşçakalın.. 🙂

Web Programlama – 2 (HTML/CSS)

Tekrardan Merhabalar,

CSS Uygun Stilleri ve bu Stilleri Nasıl Uygulanacağını Belirlemek İçin HTML Dökümanının Yapısını Kullanır.Öncelikle HTML Hiyerarşisini Öğrenmemeiz Gerekiyor;

  • HTML Hiyerarşisi

Seçici(Selector) ve Döküman arasındaki ilişkiyi anlayabilmemiz için, dökümanların nasıl planlandığını tekrar gözden geçirmemiz gerekir. Aşağıdaki basit HTML dökümanı üzerine biraz düşünelim:

<html>
<head>
<title> CSS HTML Hiyerarşisi </title>
</head>
<body>
<h1>CSS<em>HTML Hiyerarşisi </em></h1>
Sitemize hoş geldiniz <em>Merhaba</em>biz <strong>sizler için <a href="konu.html"> bazı <em>önemli</em> konular </a></strong>! hazırladık
<ul>
    <li>Konu Başlıkları :
        <ul>
        <li><strong>Asıl</strong> Giriş</li>
        <li>Önsöz</li>
        <li><em>ilk</em> bölüm:
            <ol>
            <li>Elma</li>
            <li>Armut</li>
            <li>Karpuz</li>
            </ol>
        </li>
        </ul>
    </li>
  <li>...vd.</li>
</ul>
<p>Ayrıntılılı bilgi çin <a href="mailto:bilgi@omersoft.com"> mesaj gönder </a></p>
</body>
</html>

CSS’in güçlü olmasının en büyük nedeni HTML elementleri arasındaki ilişkiden yararlanmasıdır. HTML dökümanları gizli bir hiyararşi ile oluşturulur. Bu hiyerarşi içinde tüm HTML elementleri kendilerine uygun bir yer bulur. Bu ilişkiyi biz soy ağacına benzetebiliriz.

hiyerarsi

 

 

 

 

 

Yukarıdaki HTML yapısını bir soy ağacı gibi düşünüp değerlendirirsek: Bir elementin ebeveyn(anne-baba) olduğunu anlamak için o elementin altında başka element olup olmadığına bakmalıyız, eğer varsa o element ebeveyndir. Yukarıdaki şekilde p elementine dikkat edelim. p bir ebveyndir çünkü altındaem ve strong elementleri bulunmaktadır. strong da bir ebeveyndir ki onun altında a elementi vardır. Bir elementin çocuk element olduğunu anlamak için de üstünde bir elementin olup olmadığına bakarız. Yani yukarıdaki olayın tersi. Buna göre strong elementi p elementinin bir çocuğudur. Daha karmaşık yapılarda ata(ancestor) ve torun(descendant) ilişkisi vardır. Aradaki fark eğer bir element diğer elementin tam olarak bir seviye üstünde ise o ata diğeridetorun durumundadır. Yukarıdaki şekili incelersek ilk ul elementinin iki adet liçocuk elementi bulunmaktadır ve bu iki li elementinin altındaki tüm elementler ilk ul elementinin torun elementleridir.

Girişimcilik

Yeniden Merhaba,

Bugün Girişimcilik Konusunda Nacizane Düşüncelerimi Sizinle Paylaşmak İstedim. Ben Girişimciliği Şu Şekilde Tanımlıyorum;

Girişimci, Risk Alarak Mal ve Hizmet Üretimi Yapar Ve En Önemlisi Kar Amaçlı Bir şeyler Yapmaya Çalışan Kişidir.

Şimdi Bu Tanım Üerinden Gidelim. Öncelikle Aklınızda Bir Proje Var Diyelim ve Bu Projenizin Fikrine Çok Güveniyorsunuz. Burda Dikkat Edilmesi Gereken Unsurlar Şunlardır;

  • Fikriniz Hayatta Bir Sorunu Çözüyor mu?
  • Yada Fikriniz Dünya’ yı Değiştirecek Bir Fikir mi?

Şimdi Etrafımıza Baktığımızda Birçok Kişi 2. Maddeyi Seçmiş ve O Alan Üzerinde İlerliyor. Bence Bu Maddeden Artık Uzaklaşmamız Gerekiyor. Örnek Verecek Olursam: Sosyal Medya Projeleri: Artık Bu Tür Projeleri Görmekten Gerçekten Bezdim :). Birde Hepsinin Özelliğide Aynı, Hiç Birbirinden Farklı Olarak Bir Özellik Yok.

Oysa ki 1. Madde Üzerinde Biraz Dursak ve Etrafımıza Bakarak Sorun Bulup O Sorunu Çözmeye Çalışsak Herşey Daha Farklı Olabilirdi. Ülkemizin Durumu’ da Belki Bu Durumda Olmazdı. O Yüzden Çevrenize Bakın, Sorun Bulun, ve O Sorunu Çözmek İçin Günlerce, Hafalarca hatta Fikrinize Güveniyosanız Yıllarca O Proje Üzerinde Uğraşın Ve Projenizi Hayata Geçirin..

ABD’ ye Baktığımızda Bilişim Alanına Çok Büyük Yatırımlar Yapıyorlar. Apple’ da Aynı Şekilde: Apple’ ın Yeni İşletim Sistemi Olan IOS 10 İçinde Swift Dilini Öğrenmek İçin Bir App’le Beraber Geliyor. Kaçırmayın Derim :)..

Neyse Sözü Fazla Uzatmayayım. Bir Sonraki Yazıda Görüşmek Dileğiyle Hoşçakalın…

Oyun Geliştirme- 2 (UI)

Yeniden Herkese Merhaba,

Oyun Geliştirme İle İlgili Yazılarım Devam Ediyor. Bu Yazımda Unity’ nin UI Sistemine Giriş Yapacağız. UI Sisteminin Birçok Elemanı Vardır;

  • CANVAS

Canvasın 2 Önemli İşlevi Vardır;

  1. Diğer UI Elemanlarını İçine Alır ve İçinde Barındırır. Ve Diğer Tüm Arayüz Elemanları Canvas İçinde Barındırılır.
  2. Canvas Oyunumuzu 3D Oyunlardan Ayıran En Önemli Özelliğimizdir.
  • BUTTON

Adındanda Anlaşılcağı Üzere Bu Eleman Tıklanma Özelliği Bulunan Bir Butondur.

Bu elemanın özelliklerinden bahsetmeden önce birlikte bir canvas ve birkaç butondan oluşan basit bir arayüz oluşturmayı uygun buldum. Böylece yeni sistemle birlikte nasıl hiç kod yazmadan arayüz oluşturabildiğimizi görecek ve bazı önemli terimlerle tanışacaksınız: anchor ve pivot.

1- GameObject-UI-Canvas yolunu izleyerek elle oluşturabiliriz.

2- Direkt GameObject-UI-Button ile bir buton oluştururuz ve yeni bir canvas bizim için otomatik olarak oluşturulur.

Ben 2. yolu tercih edeceğim. GameObject-UI-Button yolunu izleyin. Hierarchy panelinizde bir canvas bir de button belirecek.

Eğer Scene paneline bakacak olursanız devasa bir dikdörtgensel alan ve bu alanın içine yerleştirilmiş ufak bir buton göreceksiniz. İşte bu dikdörtgensel alan bizim canvas’ımız. Şu anda canvas 2D modunda, yani canvasın içinde oluşturduğumuz arayüz elemanları direkt oyun ekranının üzerine çizilecekler.

  • Butona Basınca Yapılacakların Ayarlanması

Yeni UI Sisteminde Eskiye Göre Birçok Yenilik Getirildi. Eskiden GUITexture’ ler vardı ve Bunlara Kodla OnMouseDown() Fonksiyonu İle Erişebiliyoduk. Ama Yeni Sistem Bu İşi Gayet Kolay Ve Zevkli Bir Hale Getirdi.

Örnekle Gösterelim,

Ekranda Bir Tane Canvasımız var Ve Bu Canvasın İçine Bir Button Ekleyelim. Bu butona tıklayınca konsola “Merhaba Dünya” yazdırmak istiyoruz diyelim. Bunun İçin Çok Kısa Bir Kod Bloğuna İhtiyacımız Var. Bu Örnekte Javascript Kullanacağım Başka Serilerde C# İlede Kullanacağım.

“Örnek.js” Adında Yeni Bir Js Oluşturuyoruz. İçeriğini Şu Şekilde Düzenleyin;

public function Merhaba()
{
    Debug.Log( "Merhaba Dünya" );
}

 

Bu Scripti İstediğiniz Objeye Sürükle Bırak Yöntemi İle Atın(ben Main Camera‘ya vereceğim). Şimdi Button Objesini Seçin. Inspector‘da “On Click()” diye bir kısım var. Bu (şu anda boş olan) bir listedir. Butona tıklandığı zaman bu listede yer alan fonksiyonlar otomatik olarak çağrılır. Biz Main Camera’daki Örnek.js script’inin Merhaba() fonksiyonunu çağırmak istiyoruz. Bunun için oradaki + işaretine tıklayın. Obje olarak Main Camera’yı seçin ve fonksiyon olarak MerhabaScript-Merhaba() yolunu izleyin:

  • İPUCU

Shift tuşu! Bu tuş çok işinize yarayabilir.

Objeyi Bir Yerden Başka Bir Yere Taşırken Shift’ e Basılı Tutarak Yatay ve Dikey Eksendeki Hareketleri Haricindeki Hareketleri Engeller.

  • Panel

Bu Eleman Oyununuzun Arayüzünü Güzel Gözükmesini Sağlayan Bir UI Elemanıdır. Bazen Lazım Olabiliyor.

  • Ekran Çözünürlüğünün Her Telefonda Aynı Kalması

Button’u işlerken anchor‘ları kullanarak arayüz elemanlarının arayüzle beraber nasıl boyutlanabileceğini gördük. Ancak bazen özel durumlar olur. Örneğin arayüzde bir resim çizdiriyorsunuz diyelim. Resmin anchor’larını canvas’ın dört bir köşesine yaydınız; resim canvas ile büyüyüp küçülüyor. Ama burada ufak bir sıkıntı var: resmin en/boy oranı (aspect ratio) korunmuyor! Bu, butonlar için bir sıkıntı değil ama bir resim çizdirirken genelde resmin en/boy oranının korunmasını isteriz. Bu gibi durumlarda yeni UI sisteminin bize sağladığı birkaç seçenek mevcut:

Aspect Ratio Fitter

Bu component, atandığı UI elemanının en/boy oranının daima aynı kalmasını sağlar. Bu component’i Component-Layout-Aspect Ratio Fitter yolunu izleyerek istediğiniz UI elemanına verebilirsiniz. Component’in sahip olduğu “Aspect Mode” değişkeni burada önem arz ediyor:

 

37

 

 

 

 

 

 

Bu seçenekler sırayla şöyle:

None: Component işlevini kaybeder.

Width Controls Height: UI elemanının genişliği değiştikçe; yüksekliği, en/boy oranını koruyacak şekilde otomatik olarak değiştirilir.

Height Controls Width: UI elemanının yüksekliği değiştikçe; genişliği, en/boy oranını koruyacak şekilde otomatik olarak değiştirilir.

Fit In Parent: UI elemanının ya genişliği ya da yüksekliği daima parent objenin kenarlarıyla temas halinde olur (bu esnada en/boy oranı korunur).

Envelope Parent: UI elemanı, parent objesinin tamamını içine alacak şekilde otomatik olarak boyutlandırılır (bu esnada en/boy oranı korunur).

Son iki seçenek benim pek ilgimi çekmedi ama ondan önceki iki seçenek gerçekten kullanışlı duruyor. Bu iki seçeneği kullanarak hazırladığım örnek bir scene’i, örnek projenin içinde bulabilirsiniz.

Bu component’i kullanırken bilmeniz gereken önemli bir nokta daha var: pivot noktasının konumu. Eğer ki UI elemanının hep ekranın en sol üstünde yer almasını istiyorsanız ve Aspect Ratio Fitter component’ini kullanıyorsanız o zaman pivot noktasını UI elemanının sol üst köşesine taşımalısınız. Böylece UI elemanının otomatik olarak boyutlandırılması sağ ve alt kenarlar üzerinden gerçekleşecek, sol üst noktanın konumu değişmeyecek.

Canvas Scaler

Bu component benim gerçekten çok hoşuma gidiyor; kullanması da gayet basit:

Öncelikle Game panelinin sol üstündeki çözünürlük butonu vasıtasıyla çözünürlüğü 1024×768 yapıyoruz:

Sonra Canvas objesini seçiyoruz ve “Canvas Scaler (Script)” component’inin “Ui Scale Mode“unu “Scale With Screen Size” yapıyoruz. Karşımıza gelen yeni değişkenlerden referans çözünürlüğü 1024×768 yapıyor, “Screen Match Mode“u ise “Expand” yapıyoruz.

Artık arayüzümüzü hazırlamaya hazırız. Arayüzü hazırlarken dikkat etmemiz gereken nokta, UI elemanlarının anchornoktalarını dört farklı noktaya yaymak yerine bir noktada toplamak.

NOT: Canvas Scaler‘ın sahip olduğu diğer değişkenleri araştırmak size düşmüş; onların nolduğunu ben de tam bilmiyorum.