Web Tasarım by Mustafa Çakmak https://padlet.com/mstfckmk70/webtasarimgursel Kağıthana Gürsel İsmek en-us 2016-12-29 11:59:01 UTC 2017-01-15 08:42:58 UTC hello@padlet.com https://padlet-assets.s3.amazonaws.com/icons/Thunder.png Web Tasarım mstfckmk70 https://padlet.com/mstfckmk70/webtasarimgursel/wish/144871183 Sanal Mantar Panomuz]]> 2016-12-29 12:00:22 UTC https://padlet.com/mstfckmk70/webtasarimgursel/wish/144871183 bilgisayar, tablet ve mobil cihazların ekran çözünürlüklerine göre duyarlı davranan, kullanıcıya cihaz ve çözünürlük bağımsız olarak her platformda rahat bir gezinme sağlayan web tasarımlarıdır. https://padlet.com/mstfckmk70/webtasarimgursel/wish/147219636 -kullanımı kolaydır
-düşük maliyetlidir
-HTML5 ve CSS3 ara yüz kodlama dilleriyle oluşturulmaktadır
-Site URL yapısı aynı kalacağından arama motorları tarafından bulunması daha hızlı gerçekleşecektir.

]]> 2017-01-15 07:54:34 UTC https://padlet.com/mstfckmk70/webtasarimgursel/wish/147219636 https://padlet.com/mstfckmk70/webtasarimgursel/wish/147219878 Responsive Site Nasıl Yapılır?
Gelişen internet dünyası nedeni ile web tasarımı kavramı değişti. Web tasarımcılar şu an piyasada kullanılan tüm ekran çözünürlükleri ve boyutları için sorunsuz çalışan tasarımlar yapıyor.Peki bu tasarımları nasıl yapıyorlar?

Css bu anda hızır gibi yetişiyor.Ben de yaptığım temayı responsive hale getirme ile ilgili internette doğru düzgün bir kaynak bulamadığım için bu yazıyı yazıyorum.

Öncelikle Responsive web design nedir özetleyelim:


Bilgisayar, tablet, telefon ve benzeri tüm ekranlarda; yatay scrollbar’sız ve sorunsuz bir şekilde çalışan aktif tasarımlardır.

Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran boyutlarını bilmemizde fayda olacaktır.

  1. Tabletlerin en geniş çözünürlüğü 960px’dir.
  2. Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
  3. Dikey telefonların  en geniş çözünürlüğü 479px’dir.
Bu boyutlara dikkate aldığımızda bizim en az 4 seçeneğimiz oluyor; tabletler için tasarım,yatay telefonlar için,dikey telefonlar için ve gerçek (bilgisayar üzerindeki) tasarım.

İşte Css bu konuda hızır gibi yetişiyor ve her çözünürlüğe uygun kodlama yapmamıza yardımcı oluyor.

Responsive Web Site Nasıl Yapılır?

Anlayabilmeniz için öncelikle genel mantığı anlatıp sonra  kısaca kodları verip nerede kullanıldığını yazacağım

Genel Mantık
@media only screen and (max-width: 960px) { }
Bu seçenek en geniş ekran çözünürlüğünün 960px olduğu yerden itibaren geçerlidir. {} parantezlerinin arasına yazdığınız her css kodu 960px ‘den küçük tüm çözünürlüklerde geçerli olacaktır.Bir örnekle daha iyi kavrayabiliriz.

Class adı “hibestil” olan bir div’imiz olsun (<div class=”hibestil”></div>) ve biz bu div’i 960px‘den düşük çözünürlüğe sahip ekranlarda görmek istemeyelim.Böyle olduğu zaman yukarıda verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek hibestil div’i  960px’den küçük çözünürlüklerde görünmeyecektir.

]]> 2017-01-15 08:06:57 UTC https://padlet.com/mstfckmk70/webtasarimgursel/wish/147219878