Apartman ve Site Yönetim Yazılımı apyon.net

Geçen gün yeni bir apartman site yönetim sistemini inceleme fırsatı buldum. apyon.net. Site üzerinde dökümanlarda çok detaylı açıklamaları bulunuyor. Aynı zamanda üye olmadan verilen demo şifreleri ile yazılımı inceleme fırsatına sahip oluyorsunuz. Hiçbir email kaydı yapmadan inceleyebilmek iyi bir şey.

Sitenin ısı ölçer/pay ölçer girişinden tutunda, kapıcı bordrosuna kadar her imkan var. Ayrıca mobil web site ve mobil uygulama ile apartmandakilerin aidat borçlarını istedikleri zaman görebilmesi, site yöneticisinin aylık borç ve duyuru smsleri gönderebilmesi gibi özellikler şahane olmuş.

Jquery UI Templates

Jquery Mobile ile Mobile Site Oluşturma

Tanımlama

Hazırlayacağımız site/web app dizin yapısı aşağıdaki gibi olmasını istiyorum.|- index.html|- js|- css
  |- images
Kurulum için önce Jquery sitesinden JQuery sürümlerinden JQuery mobile ile uyumlu olanı indiriyoruz. İndirilen jquery dosyasını js klasörüne kopyalıyoruz. Bu örnekte 1.11.0 kullanıldı.
Ayrıca JQuery Mobile sitesinden download ettiğimiz jquery mobile dosyaları dizine eklenmelidir. Ben custom download seçtim. Gelen sıkıştırılmış dosyayı css ler css klasörüne ve js ler js klasörüne olacak şekilde ayırıyoruz. Bu zip içinde images çıkmayacaktır. Aynı download sayfasından images zip dosyasını indirip css içine açıyoruz.

Ayrıca jquery mobile kodu çalıştığında hata almaması için mobileinit eventını tanımlıyoruz.

Sayfamızda Jquery UI için gerekli style ve kodları eklemek için <head> tag içine aşağıdaki kod eklenmelidir. 

    <title> Web Site Başlık</title>
        <link href="css/jquery.mobile.custom.structure.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mobile.custom.theme.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).bind('mobileinit',function(){
            $.mobile.changePage.defaults.changeHash = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
    </script>
    <script src="js/jquery.mobile.custom.js" type="text/javascript"></script>

    

İlk Sayfamızı Ekleyelim

JQuery mobile içinde bir html içine bir çok sayfa ekleyebiliyoruz. data-role attribute page değerini alması div elementinin sayfa olarak kullanılacağını gösteriyor. İkinci satırdaki div elementinin data-role değeri header. Bu div içindekilerinin sayfanın başındaki header bölümüne yerleştirileceği anlamını taşıyor. Örnekte için h1 elementi ve içinde Başlık Metni metni var.

Altıncı satırdaki div elementi data-role 

<div data-role="page" id="one">
 <div data-role="header">
  <h1>Başlık Metni</h1>
 </div><!-- /header -->

 <div data-role="content"> 
İçerik
 </div>
        <!-- /content -->

 <div data-role="footer">
  <h4>Alt Metin</h4>
 </div>
        <!-- /footer -->
</div>
<!-- /page -->

• Button

<a href="#" data-role="button" data-icon="star" data-theme="b">btncaption</a>

• listview

<ul data-role="listview" data-inset="true" data-filter="true">
 <li><a href="#">Acura</a></li>
 <li><a href="#">Audi</a></li>
 <li><a href="#">BMW</a></li>
 <li><a href="#">Cadillac</a></li>
 <li><a href="#">Ferrari</a></li>
</ul>

• slider

   <label for="slider-0">Input slider:</label>
   <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />

• button

<a href="#link" data-role="button" data-icon="star" data-theme="b">ButtonCaption</a>

• textinput

    <label for="basic">Text Input:</label>
    <input type="text" name="name" id="basic" value=""  />

• field container

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div> 

• diğer input tipleri

   <div data-role="fieldcontain">
          <label for="password">Password:</label>
          <input type="password" name="password" id="password" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="number">Number:</label>
          <input type="number" name="number" id="number" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="number-pattern">Number + pattern:</label>
          <input type="number" name="number" pattern="[0-9]*" id="number-pattern" value="" placeholder="Pattern attribute [0-9]* for a numeric keypad" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="email">Email:</label>
          <input type="email" name="email" id="email" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="url">Url:</label>
          <input type="url" name="url" id="url" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="tel">Tel:</label>
          <input type="tel" name="tel" id="tel" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="time">Time:</label>
          <input type="time" name="time" id="time" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="date">Date:</label>
          <input type="date" name="date" id="date" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="month">Month:</label>
          <input type="month" name="month" id="month" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="week">Week:</label>
          <input type="week" name="week" id="week" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="datetime">Datetime:</label>
          <input type="datetime" name="datetime" id="datetime" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="datetime-l">Datetime local:</label>
          <input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
   </div>
   
   <div data-role="fieldcontain">
          <label for="color">Color:</label>
          <input type="color" name="color" id="color" value="" />
   </div>
   

• textarea

<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
</textarea>

• search input

<label for="search-basic">Search Input:</label>
<input type="search" name="search" id="search-basic" value="" />

• search input field containers

<div data-role="fieldcontain">
    <label for="search-2">Search Input:</label>
    <input type="search" name="search-2" id="search-2" value="" />
</div>

• slider

<label for="slider-fill">Input slider:</label>
<input type="range" name="slider-fill" id="slider-fill" value="60" min="0" max="100" data-highlight="true" />

• switch

<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
 <option value="off">Hay&#305;r</option>
 <option value="on">Evet</option>
</select> 

• dikey radyo düğmeleri (radio buttons)

<fieldset data-role="controlgroup">
 <legend>Choose a pet:</legend>
      <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
      <label for="radio-choice-1">Cat</label>

      <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
      <label for="radio-choice-2">Dog</label>

      <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
      <label for="radio-choice-3">Hamster</label>

      <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
      <label for="radio-choice-4">Lizard</label>
</fieldset>

• yatay yapmak için

<fieldset data-role="controlgroup" data-type="horizontal" >

• checkbox

<label><input type="checkbox" name="checkbox-0" /> I agree </label>
   
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>

• yatay için

<fieldset data-role="controlgroup" data-type="horizontal">

• select

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

• form body set

<div class="ui-body ui-body-b">

• ajax form

   <form action="forms-sample-response.php" method="get" class="ui-body ui-body-a ui-corner-all">
    <fieldset>
     <div data-role="fieldcontain">
      <label for="shipping" class="select">Shipping method:</label>
      <select name="shipping" id="shipping">
       <option value="Standard shipping">Standard: 7 day</option>
       <option value="Rush shipping">Rush: 3 days</option>
       <option value="Express shipping">Express: next day</option>
       <option value="Overnight shipping">Overnight</option>
      </select>
     </div>
     <button type="submit" data-theme="b" name="submit" value="submit-value">Submit</button>
    </fieldset>
   </form>

• button lu footer

<div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo">
  <div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
   <ul class="ui-grid-b">
    <li class="ui-block-a"><a href="#" data-icon="grid" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Summary</span><span class="ui-icon ui-icon-grid ui-icon-shadow">&nbsp;</span></span></a></li>
    <li class="ui-block-b"><a href="#" data-icon="star" class="ui-btn-active ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-a" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="a" data-inline="true"><span class="ui-btn-inner"><span class="ui-btn-text">Favs</span><span class="ui-icon ui-icon-star ui-icon-shadow">&nbsp;</span></span></a></li>
    <li class="ui-block-c"><a href="#" data-icon="gear" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">Setup</span><span class="ui-icon ui-icon-gear ui-icon-shadow">&nbsp;</span></span></a></li>
   </ul>
  </div><!-- /navbar -->
 </div>

Cordova Mobil Uygulama Tespiti

Cordova web tabanlı mobil uygulama geliştirmek için kullanılan bir framework. Bu framework ile mobil web sayfanızı mobil uygulama haline getirebilirsiniz. Önemli avantajı bir çok platfromu (başlıca android, ios, windows phone) destekliyor olması.

Zaman zaman sayfamız ile mobil uygulama arasında farklı çalışmasını isteyeceğimiz rutinler olabiliyor. Bunun için uygulamamın web tarayıcıda mı yoksa mobil app üzerinde mi çalıştığını tespit etmemiz gerekiyor.

Bunun için cordova frameworkünü tespit etmemiz yeterli olacaktır. Kısaca eğer cordova framework tanımlı ise mobil app değil ise web tarayıcıdayız demektir.

Cordova Framework tespit için yöntemler
1- window.cordova

var isMobilApp = !window.cordova;

cordova framework yüklendiğinde window altında cordova nesnesi oluşacaktır. Bu nesne var ise mobil uygulamadayız demektir.

2- Url kontrolü

var isMobilApp = document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1;

Cordovada döküman urli file:// ile başlamaktadır. Web tarayıcıda ise http yada https olacaktır. Doğal olarak document.URL http yada https ile başlamıyorsa mobil uygulama içindeyiz demektir.

3- cordova.js yüklendi mi?

<script src="cordova.js" onload="javascript:window.isMobilApp = true;"></script>

index.html içinde cordova.js yüklendiği script tagi içine onload ekleyerek. Mobil olup olmadığı tespit edilebilir.

Birinci ve üçüncü yöntemler cordova frameworkü tam olarak yüklendi ise işleyecektir. İkinci yöntem ise framework yüklenmeden de mobil uygulamada olup olmadığımızı öğrenebiliriz.

Eğer bir plugin işletilmesi için tespit yapıyorsak birinci (yada üçüncü) yöntemi, görsel bir farklılık oluşturmak istiyorsak ikinci yöntemi tavsiye ederim.

Faydalı Chrome Uzantıları (Plugins)

Chrome çıktığı dönemden beri hızla kullanıcı sayısını çok hızlı arttırarak en çok kullanılan tarayıcı oldu. Chrome web tarayıcı olarak çok kullanılıyor ama bunun dışında çok faydalı araçlarla bir çok değişik amaçla kullanımı mevcut. Bunun için plugins/uzantılar kullanılmakta. Türkçeye uzantılar olarak çevirmişler bende aynı şekilde kullanacağım. Her nevi uzantıya Chrome Web Marketteki uzantılar bölümünden ulaşmak mümkün. link

Kullandığım ve faydalı olduğunu düşündüğüm chrome uzantılarını burada yazmak istiyorum.

1- Chrome Uzaktan Masaüstü

Chrome uzaktan masaüstü uzantısı ile bilgisayarınıza uzaktan chrome üzerinden bağlanarak kontrol edebilirsiniz. Teamviewer yada Ammyy gibi yazılımlarla yapabildiğiniz işlemleri ücretsiz olan bu uzantı ile yapabilirsiniz. Uzantı chrome çalışan sistemlerin çoğunda sorunsuz çalışıyor. Ben MacOS ve Windows üzerinde sorunsuz kullandım.

Uzantıyı bu linkten yükleyebilirsiniz.

 

2- Çevirici

Web sayfalarında dolaşırken farklı lisanlarda metinlerle karşılaşıyoruz. Bazen bilmediğimiz bir kelime yada cümle hatta paragrafı hızlı bir şekilde çevirmek önemli oluyor. Konudan kopmadan okumaya devam edebiliyorsunuz. Bunun için ideal araç google çevirici uzantısı. Bu uzantı ile seçtiğiniz bir kelime yada cümle hızlı bir şekilde çevrilebiliyor.

Google çeviriciyi bu linkten yükleyebilirsiniz.

3- Pocket

Web sayfasını o an okumak istemiyorsunuz ve müsait olduğunuzda offline iken mobil cihazınızdan okumak istiyorsunuz. Yada okuduğunuz bir metni daha sonra offline olsanız dahi ulaşmak istiyorsunuz. Bunun için en iyi çözüm Pocket. Chrome uzantısı ile sayfaları kaydederek mobil uygulaması ile okumanız mümkün.

Uzantıyı bu adresten yükleyebilirsiniz.

4- Keynotes

Eskiden sayfalardan küçük notlar alıp genellikle metin dosyası olarak bir yerlere kaydederdim. Daha sonra bu özetlenmiş değişik sayfalardan toplanmış notları bulmakta zorlanırdım. Bunun için iyi bir çözüm keynotes uzantısı. Bu uzantıya başlık ve kategori vererek bir takım notları kaydedilebiliyor. Daha sonra istendiğinde kategorilerden yada arama bölümünden hızlıca erişim sağlanabiliyor.

Bu adresten yükleyebilirsiniz.

5- Keepass

Ben Keepass uygulaması ile uzun süredir değişik sitelerde üye olduğum kullanıcı bilgilerini tutmaktaydım. Bu uzantı ile uygulama yüklemeden keepassdeki kullanıcı bilgilerime hızlı şekilde ulaşmam mümkün oluyor. Aslında öncelikle neden şifreler için bir uygulama ihtiyacı var açıklamak lazım. Bir çok siteye üye olmak istiyorsunuz her sitede farklı kullanıcı adınız olabiliyor ayrıca üye olduğunuz her siteye aynı şifreleri yazmanız güvenlik açısından sorun oluşturur. Üye olurken yazdığınız şifre ile karşı tarafın sizin başka (örneğin facebook) hesaplarınızıda deneyerek erişmesi mümkün olabilir. Her üyelikte farklı farklı şifreler kullandığınızda bu bilgilerinizin güvenli olması gerekir.

Keepasste tüm üyelik şifre bilgilerinizden kriptolu bir dosya oluşturuyor ve bu dosyaya tekbir şifre ile (master password) erişerek diğer tüm şifrelerinizi görebiliyorsunuz.

Ben oluşan veri dosyasınıda google drive üzerine kaydettiğimden hem mobil hem masaüstü her ortamdan erişme imkanına sahip olabiliyorum.

Keepass uygulamasını bu linkten  chrome uzantısınıda bu linkten yükleyebilirsiniz. Uzantıyı kullanmak için uygulama yüklemeye ihtiyacınız yok. İncelemek isterseniz diye onuda ekledim.

6- Döviz Kurları

Arada sırada gezintinizi bölmeden anlık döviz kurlarını merak ediyorsanız ideal bir araç. Bu araç ile chrome uzantılar bölümündeki linkine tıklayarak TCMB yada çeşitli bankaların kur bilgileri hızlıca öğrenilebiliyor.

Uzantıyı bu adresten yükleyebilirsiniz.

7- Canlı Skor

Benim gibi futbolu takip etmek istiyorsanız güzel bir uzantı Canlı Skor. Bu uzantı ile o gün yapılacak maçlar listeleniyor. Maç oynanırken son durumunu ve maçla ilgili bilgilere chrome üzerinden ulaşılabiliyor.

Yüklemek için bu adrese tıklayın.

Bu uzantılar dışında bir çok uzantı daha kullandım ama en sık kullandıklarım bunlar. İleride beğendiğim chrome uzantısı oldukça ekleyeceğim.

JQuery ile Nesnenin Görünürlüğünü Bulma

JQuery ile bir nesnenin ekranda görünüp görünmediğini tesbit etmek için




 

var isVisible = $('#myDiv').is(':visible');

 kullanabiliriliz. Benzer şekilde görünmediği tesbit etmek istiyorsak

 

var isHidden = $('#myDiv').is(':hidden');

kullanabiliriz.

Google 1 Nisan Şakası

Google 1 Nisanda yine boş geçmedi ve güzel bir 1 nisan şakası yaptı. Şaka sitenin İngilizce sürümünde yayınlanıyor. Öncelikle Google arama alanına arayacağınız kelimeyi yazmaya başlıyorsunuz. Ben test yazdım mesela. Google birkaç saniye içinde otomatik tamamlama penceresini çıkarıyor ve alternatif kelimeleri veriyor.

1 Nisan şakasıda burda başlıyor. Bu listenin sonunda We are hiring Autocompleters yazıyor. Türkçe anlamı Otomatik tamamlayıcılar -personel- işe alınacaktır demek oluyor. Bu linke (linkde burda) tıkladığınızda ciddi ciddi bir işin tanımı hakkında bilgiler geliyor. Sanki otomatik tamamlayıcı insanlar var eleman aranıyor tarzında bir yazı. Yazının sonunda başvuru durumunu görmek için ayrı bir link verilmiş (o linkde burda) tıkladığınızda google 1 nisan şakası olduğunu anlıyorsunuz.  Güzel olmuş. :)))

Mobil Web Uygulamalarında Adres Çubuğunu Gizlemek

Hem iOs, hem de Android işletim sistemi kullanılan cihazlar Webkit altyapısını kullanırlar. Webkit kullanmaları mobil ortamda bazı avantajlar sağlar,

• Webkit sayfa üreteci hızlıdır
• CSS tanımı geniştir

Bu avantajlar mobil ortamda web uygulamaların cihaz üzerinde çalışanlar (Native) gibi fonksiyonel olmasını sağlar.


Adres çubuğunu kapatmak zaten dar olan bir ekranda 60 piksel yükseklikten kazandıracaktır. Bunun için aşağıdaki kodu javascript dosyanıza (yada html üzeride script tag içinde) eklemelisiniz.

// When ready...
window.addEventListener("load",function() {
 // Set a timeout...
 setTimeout(function(){
  // Hide the address bar!
  window.scrollTo(0, 1);
 }, 0);
});