Forum'da ara:
Ara


Yazar Mesaj
Mesaj21.05.2016, 15:08 (UTC)    
Mesaj konusu: mobil tasarım hakkında

siteme mobil tasarım yapmak istiyorum mobil tasarım için nerden başlamalıyım bilen biri varsa yardımcı olursa sevinirim...
Mesaj21.05.2016, 22:05 (UTC)    
Mesaj konusu: Re: mobil tasarım hakkında

orphestudio yazmış:
siteme mobil tasarım yapmak istiyorum mobil tasarım için nerden başlamalıyım bilen biri varsa yardımcı olursa sevinirim...


Tasarım / Tasarım ayarları bölümüne gidiniz. Orada "mobil" seçeneğini göreceksiniz.
______________
Lütfen forum kurallarına uyarak hareket ediniz.
Lütfen forum da oluşturacağınız başlıkları doğru kategorilere açınız.
Lütfen doğru ve güzel Türkçe kullanmaya özen gösteriniz.
Lütfen forum da argo, küfür, siyaset ve şiddet içeren başlıkların silineceğini ve ilgili kişiler hakkında işlem yapılacağını unutmayınız.
______________
(at) yerine @ yazılmalıdır!
Mesaj22.05.2016, 11:12 (UTC)    
Mesaj konusu: Re: mobil tasarım hakkında

salihtoy yazmış:
orphestudio yazmış:
siteme mobil tasarım yapmak istiyorum mobil tasarım için nerden başlamalıyım bilen biri varsa yardımcı olursa sevinirim...


Tasarım / Tasarım ayarları bölümüne gidiniz. Orada "mobil" seçeneğini göreceksiniz.


ama mobil tasarıma göre tam olarak uyarlamıyor çok eksiklik oluyor mesela yüksekliklerde genişliklerde sayfanın çoğu şeyinde kaymalar oluyor bu sorunu nasıl giderebilirim ?
Mesaj22.05.2016, 17:21 (UTC)    
Mesaj konusu:

Mobil sayfanın ID ve CLASS etiketlerine stil tanımlamaları yaparak her türlü sorunu giderebilirsiniz. Örneğin mobil tasarıma ait bazı ID ve CLASS etiketleri şunlardır:
.ui-body-c .ui-header .ui-content #nav-panel .ui-footer
______________
Mesaj23.05.2016, 06:51 (UTC)    
Mesaj konusu:

slobada yazmış:
Mobil sayfanın ID ve CLASS etiketlerine stil tanımlamaları yaparak her türlü sorunu giderebilirsiniz. Örneğin mobil tasarıma ait bazı ID ve CLASS etiketleri şunlardır:
.ui-body-c .ui-header .ui-content #nav-panel .ui-footer


tam olarak anlamadım mobil tasarım yerinde İd ,class yerleri yok bunları nasıl yapcaz anlamadım açık anlatırsan
Mesaj23.05.2016, 12:40 (UTC)    
Mesaj konusu:

Tasarım > Mobil Tasarım > Bir alt sayfanın içerik metni (örneğin CSS kodu kullanılabilir) bölümünü ID ve CLASS etiketlerine stil tanımlamaları (yani CSS kodlaması) yapmak için kullanabilirsiniz. Daha net anlaşılabilmesi için bir örnek vermek gerekirse, ilgili bölüme şöyle bir kodlama girebilirsiniz:
Kod:
.ui-content {
  width: 92%;
  height: 92%;
  padding: 6px 27px;
  margin: 23px 27px;
  overflow: visible;
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
  box-shadow: 0 0 1em #90caf9;
  font-size: 14px;
}

______________
Mesaj23.05.2016, 12:49 (UTC)    
Mesaj konusu:

Mesaj23.05.2016, 14:21 (UTC)    
Mesaj konusu:

slobada yazmış:
Tasarım > Mobil Tasarım > Bir alt sayfanın içerik metni (örneğin CSS kodu kullanılabilir) bölümünü ID ve CLASS etiketlerine stil tanımlamaları (yani CSS kodlaması) yapmak için kullanabilirsiniz. Daha net anlaşılabilmesi için bir örnek vermek gerekirse, ilgili bölüme şöyle bir kodlama girebilirsiniz:
Kod:
.ui-content {
  width: 92%;
  height: 92%;
  padding: 6px 27px;
  margin: 23px 27px;
  overflow: visible;
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
  box-shadow: 0 0 1em #90caf9;
  font-size: 14px;
}


kendi sayfamın tasarım kodunu mobil tasarım koduna yapıştırsam oluyormu ? yoksa tekrardan ayrı bir tasarım kodumu yazmak gerekiyor ?
Mesaj24.05.2016, 10:15 (UTC)    
Mesaj konusu:

Eğer BS'in mobil tasarımını kullanmak istiyorsanız, onun hazır tanımlamalarına uygun kodlama yapmalısınız. Eğer kendiniz bir mobil tasarım oluşturmak istiyorsanız, bunu istediğiniz şekilde hazırlayabilirsiniz. Lakin kodlarınızı doğrudan kopyalarsanız istediğiniz sonucu alamazsınız, genişlik veya aralık gibi değerlerde değişiklikler yapmanız gerekir. Tüm bunlarla uğraşmaktansa sitenizde kullandığınız tasarımı duyarlı hale dönüştürmenizi tavsiye ederim.
______________
Mesaj24.05.2016, 16:45 (UTC)    
Mesaj konusu:

slobada yazmış:
Eğer BS'in mobil tasarımını kullanmak istiyorsanız, onun hazır tanımlamalarına uygun kodlama yapmalısınız. Eğer kendiniz bir mobil tasarım oluşturmak istiyorsanız, bunu istediğiniz şekilde hazırlayabilirsiniz. Lakin kodlarınızı doğrudan kopyalarsanız istediğiniz sonucu alamazsınız, genişlik veya aralık gibi değerlerde değişiklikler yapmanız gerekir. Tüm bunlarla uğraşmaktansa sitenizde kullandığınız tasarımı duyarlı hale dönüştürmenizi tavsiye ederim.


nasıl tam olarak açıklarsan anlamadım tam.sitedeki tasarımı duyarlı hale nasıl dönüştürüyoruz ?


En son orphestudio tarafından 24.05.2016 16:45:59 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj25.05.2016, 02:49 (UTC)    
Mesaj konusu:

Duyarlı bir tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Örneğin duyarlı bir tasarım için; ekran çözünürlüğü 960px'ten küçük cihazlar için:
Kod:
@media only screen and (max-width: 960px) { }
Ekran çözünürlüğü 801px ve 959px arasında olan cihazlar için:
Kod:
@media only screen and (min-width: 801px) and (max-width: 959px) { }
gibi kodlamalar yapılabilir. Daha ayrıntılı bir örnek vermek gerekirse;
Kod:
@media only screen and (max-width: 960px) { .slobada{background:#000;color:#fff;width:100%;} }
@media only screen and (min-width: 801px) and (max-width: 959px) { .slobada{background:#ECE;color:#88F;width:85%;} }
Site tasarımınıza ekleyeceğiniz bu gibi tanımlamalar, websitenizi daha duyarlı bir hale getirir.
______________
Mesaj25.05.2016, 08:04 (UTC)    
Mesaj konusu:

slobada yazmış:
Duyarlı bir tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Örneğin duyarlı bir tasarım için; ekran çözünürlüğü 960px'ten küçük cihazlar için:
Kod:
@media only screen and (max-width: 960px) { }
Ekran çözünürlüğü 801px ve 959px arasında olan cihazlar için:
Kod:
@media only screen and (min-width: 801px) and (max-width: 959px) { }
gibi kodlamalar yapılabilir. Daha ayrıntılı bir örnek vermek gerekirse;
Kod:
@media only screen and (max-width: 960px) { .slobada{background:#000;color:#fff;width:100%;} }
@media only screen and (min-width: 801px) and (max-width: 959px) { .slobada{background:#ECE;color:#88F;width:85%;} }
Site tasarımınıza ekleyeceğiniz bu gibi tanımlamalar, websitenizi daha duyarlı bir hale getirir.


mjobil tasarım kodu yazarken hep "@media only screen" kodunumu kullanıcaz her koda başlarken?
Mesaj25.05.2016, 18:25 (UTC)    
Mesaj konusu:

Evet, duyarlı bir tasarım için medya sorguları kullanılır. Ayrıntılı bilgi için CSS 3 Media Queries veya CSS 3 Medya Sorguları aramalarına göz atabilirsiniz.
______________
Mesaj25.05.2016, 20:46 (UTC)    
Mesaj konusu:

slobada yazmış:
Evet, duyarlı bir tasarım için medya sorguları kullanılır. Ayrıntılı bilgi için CSS 3 Media Queries veya CSS 3 Medya Sorguları aramalarına göz atabilirsiniz.


ozaman ben bunu tekrardan mobil olarak kodlucam baştan olarak ölemi yani aynı kodları bide mobil olarak uygulucaz ozaman ölemi ?
Mesaj28.05.2016, 22:19 (UTC)    
Mesaj konusu:

Evet, eğer BS'in mobil tasarımını kullanmak istemiyorsanız, bu şekilde kodlarınızı duyarlı hale getirebilirsiniz. Eğer Medya Sorguları ile yapılan bu işlem de karmaşık geliyorsa, temel olarak duyarlılığı yüzdelik dilimler belirterek de sağlayabilirsiniz. Misal CSS içerisindeki width:80%; tanımlaması, hangi tarayıcıdan girilirse girilsin, ilgili içeriğin ekran genişliğine göre %80 genişlikte açılmasını sağlar. font-size:75%; tanımlaması, yine hangi tarayıcıdan girilirse girilsin, ilgili içeriğin yazılarının varsayılan font büyüklüğünden %25 daha küçük açılmasını sağlar gibi örnekler çoğaltılabilir...
______________
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu