Topluluk Merkezi
Advertisement
Topluluk Merkezi

Masaüstündeki üst düzey kullanıcılar için yararlı olsa da, maalesef içeriklerinin diğer platformlarda (mobil gibi) nasıl görüntülendiğine müdahale eden birçok farklı yaygın vikimetin uygulaması vardır. İç içe geçmiş tablolar en iyi örnektir.

Mobil cihazlar için en iyi uygulamalar hakkında bir hatırlatma olarak: Bir Fandom URL'sinin sonuna ?useskin=fandommobile ekleyerek ve pencerenin genişliğini bir mobil ekrana benzeyecek şekilde azaltarak, düzenlemelerinizin bir mobil cihazda nasıl görüneceğini her zaman önizleyebilirsiniz.

İç içe tablolar nedir?

İç içe geçmiş tablolar, basitçe tabloların içindeki tablolardır (tablo başlangıcı olarak da bilinir!)

Brave Frontier topluluğumuzdaki iç içe geçmiş tabloların bir örneğini burada bulabilirsiniz. Temiz masaüstü görünümü ile optimum olmayan mobil görünüm arasındaki farka dikkat edin.

Desk Mob.png

İç içe geçmiş tablolar neden kötü olur?

Mümkün olduğunca iç içe geçmiş tablolar kullanmaktan kaçınmalısınız. Tablolar, genel olarak, her zaman alabilecekleri en küçük genişliği kaplar ve hatta yatay alan sınırlı olduğunda dikey olarak uzar. Bununla birlikte, bir tablo başka bir tablonun içine yerleştirilirse, bu hücrelerin genişliğini ek tabloyu barındırmaya zorlar. Özünde, bu, tüm tablo yapısını alanın izin verdiğinden çok daha geniş olmaya zorlar. Bu, özellikle mobil ekran için kötü çünkü ekranın boyutu çok daha küçük.

Sonuç: Bu, mobil cihazlarda çok fazla yatay kaydırmaya (kötü bir kullanıcı deneyimi) neden olur ve tablonun çoğu görünümden gizlenir. İç içe geçmiş tabloları birkaç bağımsız tabloya bölerseniz, bilgiler yatay bir tablo yerine sayfada dikey olarak aşağı kaydırılarak görüntülenir.

Bu aynı zamanda her tablonun daha dinamik olmasını sağlar. İçerik biçimlendirmesi, mobil ekranın boyutuna göre belirlenir. Bu nedenle tarayıcı, içerik kaydırmanın genel akışını iyileştirmek için tabloları görüntülenebilecekleri yere taşıyacaktır.

Topluluğunuz iç içe geçmiş tablolar kullanıyorsa ne yapmalı

Onları iç içe geçmiş tabloları ayırmaya ve tabloların içindeki tablolara bağlı olmayan bir altyapı oluşturmaya teşvik edin. Yukarıdaki gibi, tablolar yan yana dizmek çoğu zaman aynı sonucu elde edebilir. İçerik en iyi şekilde bir tablo biçiminde sunuluyorsa, hücreleri her zaman bir tablodaki başka bir tabloya benzeyecek, ancak yine de yalnızca tek bir büyük tablo olacak şekilde ayarlayabilirsiniz.

İç içe geçmiş tablolardan kaçınmak için en iyi uygulamalar

İç içe geçmiş tablolar nasıl tanımlanır

Kaynak kodda, tablolar her zaman {| veya <table> HTML metinleriyle başlar. Tablolar ters kodla kapatılır: |} veya </table>. Bu nedenle, bir tablonun başlangıcını görürseniz ve o tablonun kapanış parantezlerine varmadan önce, bir tablonun başka bir başlangıcıyla karşılaşırsanız, bu bir tablonun içine yerleştirilmiş bir tabloyu gösterir. Bu, birkaç katman derinliğine inebilir.

İşte iç içe geçmiş bir tablonun kaynak kodu örneği:

Example code 1024.png

İç içe geçmiş tablolar nasıl kırılır

İlk adım, ana tablo içinde kaç tablonun yuvalanmış olduğunu belirlemektir. İkinci adım, en uzaktaki iç içe geçmiş tabloyu (veya en köklü) tabloyu bulmak ve onu iç içe geçmiş tablolar zincirinden çıkarmaktır. Önizlemeyi tıkladıktan sonra, tablonun parametrelerini kontrol ederek beklendiği gibi görünmeyen tablolarda sorun giderebilirsiniz (tablonun açılmasının hemen ardından gelen kod: {|)

Tüm dahili tabloları ana tablodan çıkardıktan sonra, orijinal tablo kodunu silebilirsiniz. Şimdi tablolar, mobil cihazlar için optimize edilmiş görüntüleme için istiflenmelidir.

Tablolar ayrı olduğu için masaüstü ekranınızı nasıl koruyabilirsiniz

Tablolar yukarıdan aşağıya veya yan yana dizilmelidir. Bu, mobil tarayıcınızın, masaları mobil ekranda ayrılan alana sığacak şekilde itmesine ve hareket ettirmesine olanak tanır. Tablolar yan yana ise ve mobil ekranın genişliğine sığmıyorsa, tarayıcı otomatik olarak aşağıdaki son tabloyu itecektir.

Bununla birlikte, tablolarınızı konumlandırmanın bu aşamasında karşılaşacağınız en büyük zorluklardan biri, masaüstünde nasıl göründükleri ile mobil ekranda nasıl göründükleri arasında bir uzlaşma bulmaktır. Bu, tabloların masaüstü ekranında nasıl göründüğünü kontrol etmek için satır içi CSS'nin ayarlanmasını gerektirebilir. Tablo vikimetinize CSS yazmak yalnızca masaüstü sürümünü etkileyecektir, bu nedenle mobil sürüm hâlâ doğru şekilde görüntülenecektir. Tablo konumlandırma konusunda daha fazla bireysel yardıma ihtiyacınız varsa, sayfanın altındaki kaynaklar listesine bakın.

İç içe geçmiş tablolar hakkında daha fazla yararlı bilgi

Çeşitli farklı sayfalar için bir tablo görüntülemek için bir şablon kullanılıyorsa, bu şablondaki iç içe geçmiş tablo sorununu düzeltmenin, şablonu içeren tüm sayfaların mobil görüntüsünü de düzelteceğini unutmayın. Bu optimizasyon uygulamasını şablonlarınıza uygulamanın genel topluluğunuz üzerinde büyük bir etkisi olabileceği anlamına gelir.

Ayrı hücrelerde resimlerin bulunduğu tablolar, hücreyi resim boyutuna uymaya zorlar. Bu nedenle, resimler mobil uyumlu bir boyuta indirilmeli veya tablo hücrelerinden tamamen çıkarılmalıdır. Resim çok büyükse ve tablonun dışındaysa, mobil tarayıcı onu mobil ekrana sığacak şekilde otomatik olarak boyutlandıracaktır.

Brave Frontier topluluk durum çalışması

Brave Frontier topluluğu, iç içe geçmiş masaları ortadan kaldırmak için bu çabada kobayımız/komplocularımız olacak kadar iyiydi. En önemli şablonlarından biri (karakter şablonu) için iç içe geçmiş tabloları ayırma arasındaki dengeyi başarılı bir şekilde bulmayı başardık ve yine de masaüstü görünümlerinin görünümünü ve hissini koruduk. Sonuç, topluluklarındaki çok sayıda madde için çok geliştirilmiş bir mobil düzendir. Kendiniz görün:

Daha teknik bir hizmetli iseniz ve Brave Frontier'da kaynak kodunda onu mobil görüntüleme için optimize etmek üzere tam olarak hangi değişikliklerin yapıldığını görmek istiyorsanız, kaynak kodunu değişikliklerin yapılmadan önce ve sonra görüntüleyebilirsiniz:

Not: Bu şablon, istenmeyen değişiklikleri önlemek için korunmuştur. Şablonu kendi kullanımınız için kopyalamak isterseniz, lütfen kodu kopyalayın ve kendi topluluğunuza veya korumalı alana yapıştırın.

Daha fazla kaynaklar

Advertisement