front end developer

geliştirici çantası

Menü Kapat

CSS Dikey Hizalama için 6 ipucu

Web her gün gelişmekte olan ve önlenemez yükselişiyle her geçen gün daha da takip edilmesi zor bir mecra haline geldi aynı durum her ne kadar geliştiriciler için de söz konusu olsa bile bazen bu yeniliklerden mahrum kalmış yazılım ve biçimleme dilleri de mevcut.Bunlardan bir tanesi ise CSS, geliştiriciler için dikey hizalama yaparken bu işi kökünden çözecek tek bir kod mevcut değil dikeyde hizalamak istediğimiz nesnelerimiz için ekstradan kod yazar ve farklı yollar deneriz.Bugün bu yollardan 6 tanesini beraber inceleyip test edeceğiz.

1.Position Absolute

2 adet dive ihtiyacımız var bunlardan biri kapsayıcı bir diğeri ise kapsayıcımızın çocuğu olacak olan bu aynı zamanda dikeyde ortalanacak div olan content divi.

<div class="container">
  <div class="content">Dikey ortalıyım hey!</div>
</div>

 

* {
    padding: 10px 20px;
}
.container {
  position: relative;
  height: 6em;
    width: 300px;
  background: #e5e6e5;
    margin-left: auto;
    margin-right: auto;
}
.content {
  position: absolute;
    color: #fff;
  top: 3em;
  line-height: 3em;
  margin-top: -1.5em;
  background: #7396a1;
}

Bu ipucu çok güzel çalışmakta fakat ebeveyn iskeletimize ait yalnızca bir adet çocuk seçici varken örnek iskeletimizde gördüğünüz gibi.

2.CSS3 Transform

div class="container">
    <div class="content">Dikeyde ortalanmış bir divim!</div>
</div>

 

.container{
  height: 100px;
  background: #7396a1;
    color: #fff;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.content {
    text-align: center;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

CSS3 Tranform özelliği Internet Explorer 8 ve altı sürümlerde desteklenmiyor.

3.Padding

Klasik bir yol üst ve alt taraf eşit şekilde boşluk olacak şekilde tanımlanır.

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore facere, minus pariatur.</div>
</div>

 

.container{
  background-color: #7396a1;
    color: #fff;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.content {
  padding: 10% 50px;
}

 4.Line Height

Kapsayıcı divimizin dikey genişliğiyle line height değerini aynı girdiğimiz takdirde metnimiz yine ortalanacaktır.

<div class="container">Dikeyim,dikeysin,dikeysiniz.</div>

 

.container {
  line-height: 100px;
  background-color: #7396a1;
    padding: 0 30px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

 

5.CSS Table Dönüşümü

CSS ile divlerimize tablo gibi davranması gerektiğini belirterek dikeyde ortalama yapabiliriz bu yol eski tarayıcılar tarafından da desteklenmektedir.

<div class="container">
  <div class="content">Tablo gibi davranan dikeyde ortalı bir divim</div>
</div>

 

.container {
  display: table;
  background: #7396a1;
  height: 100px;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}
.content {
  display: table-cell;
  vertical-align: middle;
    padding: 0 30px;
}

 6.Flexbox

En yeni ve modern tekniklerden biri ise flexbox yöntemi fakat şimdiden söylemeliyim ki eski tarayıcılar tarafından desteklenmemektedir bunun nedeni de flexbox’un css3’te yeni bir modül olmasından kaynaklanıyor.Bu yöntem içeriğin hizalanması için çok daha kolay bir yöntem sunuyor.

<div class="container">
  <p>I'm aligned vertically!</p>
</div>

 

.container{
  display: flex;
  align-items: center;
  height: 10em;
  background: #7396a1;
    width: 300px;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

 

HTML5 ile Kamera ve Video Kullanımı

Web platformu üzerinde flash’ın ayağını kaydırıp emekliliğinde aktif rol oynayan HTML5 karşımıza bu defa Camera API ile browser tabanlı kameralara ulaşabilmemizi sağlayan özelliğiyle karşımızda.

Bu özelliği kullanabilmek için html yapımız üzerinde ilk öncelikle görüntünün sağlanacağı video elementi görüntümüzü fotoğraf olarak yakalamamızı sağlayacak bir Fotoğrafı Çek butonu ve yakaladığı fotoğrafı önizlememiz için birer canvas elementi oluşturacağız yapıyı aşağıdan takip edebilirsiniz.

HTML Yapısı

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Fotoğrafı Çek</button>
<canvas id="canvas" width="640" height="480"></canvas>

 Javascript Yapısı

window.addEventListener("DOMContentLoaded", function() {
  // Grab elements, create settings, etc.
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
      console.log("Video capture error: ", error.code); 
    };

  
  if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
  else if(navigator.mozGetUserMedia) { // Firefox-prefixed
    navigator.mozGetUserMedia(videoObj, function(stream){
      video.src = window.URL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
}, false);


document.getElementById("snap").addEventListener("click", function() {
  context.drawImage(video, 0, 0, 640, 480);
});

HTML5’in bu özelliği şimdilik sadece chrome ve mozilla firefox tarafından desteklenmektedir ayrıca uygulamanızı bir sunucu üzerinde ya da yerel sunucu (localhost) üzerinde deneyebilirsiniz.

Nodejs Güncellemek

 

Merhabalar,
yeoman kurmak için  terminal üzerinden almış olduğum “Your npm version is outdated.”  hatası üzerine nodejs için güncelleme yapmam gerekti, güncelleme sonrası yeoman ve diğer workflow araçların kurulumunu basit bi şekilde gerçekleştirdim.

güncelleştirmeyi yapmak için ilk öncelikle komut ekranı penceresini açmalıyız bu noktada ben cmd kullanacağımı belirtmek istiyorum.

ilk adım olarak npm güncel versiyonunu kontrol edelim

node -v

ve daha sonra npm önbellek temizliği yapalım

npm cache clean -f

 

ve ardından npm’i upgrade edebilmek için terminale

npm install -g n  

ya da stabil versiyonunu upgrade etmek istiyorsak

n stable

yazarak nodejs’i güncelleyelim.

Css ile Temizlik Vakti; clearfix

Bir çoğumuz web sitesi geliştirirken içerik konumlandırmasını muhakkak yaparız sidebar sol tarafa içerik sağ tarafi gibi, fakat hemen altına yeni bir div açtığımızda bu divi göremediğimiz zamanlar yeni divimizden hemen önce class özelliği clear:both; olan ekstradan içi boş bir div daha yazarız bu da iskeletimiz de kod kalabalığına ve içerik karmaşıklığına neden olabilir.

Artık semantik kodlama yapısına uygun daha temiz daha okunaklı kodlar yazabilmemiz için yeni teknikler gelişti aslında var olan ve bilinen özelliklerdi ama kullanan sayısı az olunca hayatımıza yeni birşeymiş gibi girdi.

Daha çok grid yapılarında görebileceğimiz bir teknik.

İlk öncelikle konumlandırılmış divlerimizi taşıyan genel bir kapsayıcı oluşturalım ve içerisine konumlanacak objelerimizi yazalım.

<main class="wrapper">
 <aside class="sidebar">sidebar</aside>
 <section class="content">content</section>
</main>

bu durumda içeriğimizde ki kayma ve kapsayamama sorununa merhem olan css tekniğini şöyle uyguluyoruz;

 .wrapper:before, 
 .wrapper:after{ content:""; display:table; } 
 .wrapper:after{ clear:both; } 
 .wrapper{ zoom:1; /* IE 6 ve 7 sürümleri için clearfix. */ }

 

HTML5 ile Dosya İndirmek

HTML5 hayatımıza birçok yenilik ve zamandan tasarruf edebilmemizi sağlayan, yazılım yerine sadece birkaç nitelik ekleyerek sorunlarımızı çözebileceğimiz özellikleri ile beraber girdi. Bir çok web geliştiricisi için sorun haline gelen özellikle .pdf, metin ve görsel dosyalarında direkt olarak indirme direktifi yerine doğrudan tarayıcı üzerinde açılan linkler kullanıcılar tarafından bi nevi sorun olarak nitelendiriliyordu doğal olarak bu dosyalar indirilmek istenildiğinde farklı yollara başvuruluyor ve ziyaretçilerimiz için zaman kaybı oluyordu işte tam bu noktada HTML5 imdadımıza yetişti ve hem geliştiricileri hem de kullanıcıları ek iş yükünden kurtardı.

HTML5 ile PDF İndirmek

HTML5 ile hayatımıza giren download niteliği yalnızca .pdf değil ayrca .jpeg ve benzeri uzantıda istediğimiz her türlü dosyayı tarayıcı üzerinde  download özelliğiyle indirilebilir hale getiriyor .txt  uzantısına sahip dosyaları bile.

HTML5 Download Attribute

HTML Download attribute ek olarak rename yani varolan dosya ismi üzerinde değişiklik yapabilme gibi bi özelliğe de sahip.Varsayalım ki, PDF ve imaj dosyalarımız kullandığımız yazılım tarafından ya da herhangi bir sebepten ötürü random karakterlere sahip,örneğin;

<a href="dosyalar/afk214772diymarbat.pdf">
 PDF Dosyasını İndir
</a>
<a href="dosyalar/afk214772diymarbat.jpg">
 İmaj Dosyasını İndir
</a>

 

Böylece attribute olmaksızın, iki dosyamızda tarayıcıda açılacaktı.

HTML5 ile Dosya İndirmek

 

Pekâlâ dosyalarımıza download attribute eklediğimizde:

<a href="dosyalar/afk214772diymarbat.pdf" download="Yeni Dosya İsmi.pdf">
 PDF Dosyasını İndir
</a>
<a href="dosyalar/afk214772diymarbat.jpg" download="yeni_isim.jpg">
 İmaj Dosyasını İndir
</a>

 

Dosyalarımız download niteliğine atanan değerimiz sayesinde kullanıcılar tarafından yeni ismiyle beraber indirilebilecek.

Sonuç

Yeni özellikleriyle hayatımızda yer edinen ve  web geliştiricileri için hayatımızı kolaylaştırıp gücümüze güç katan kimi yerde back end developerdan kimi yerde plugin kullanma yükünden izole eden html güncellemesi yeni elementleriyle web geliştiricilerinin vazgeçilmezi oldu.Fakat bazı browserlar HTML5’in yeni elementlerini desteklemiyor, download elementi de bunlardan bir tanesi, download elementi IE10 ve alt sürümleri tarafından desteklenmiyor şimdilik sadece Firefox 20+, Chrome 14.0 ve Opera 15.0 tarafından destekleniyor.

Merhaba venüs!

25 Aralık 2015 ve ilk blogum! Merhaba Venüs :)