9 Aralık Pazar ´12   —   5 Yorum
Geçen hafta mfyz.com'un mobil uyumlu arayüzü üstüne çalıştım. 4 günlük bir çalışma sonucunda artık siteye mobil cihazlarınızdan uyumlu bir şekilde ulaşabileceksiniz.

Önümüzdeki haftalarda bu konuyla iligili bir yazı serisi yayınlamayı planlıyorum. Bir çok CSS çatısı zaten böyle arayüzleri hazırlamanızı sağlıyor şu anda. Ancak mfyz.com'da arayüzde herhangi bir çatı kullanmamıştım. Belki twitter bootstrap'a geçirebilirdim fakat gerek de görmedim, zaten çok basit bir arayüz yapısına sahip şu an gördüğünüz arayüz.



Masaüstü versiyonu (yukarıda görebileceğiniz şekilde), 800px genişlik ve üstündeki çözünürlüklerde görüntüleniyor. 800px'den küçük çözünürlüklerde site, mobil uyumlu yani akışkan (fluid) arayüze dönüşüyor. Bildiğiniz gibi akışkan arayüzlü sayfalar, çöznürlük bağımsız ekrana yayıldığı için farklı çözünürlüklerde sorunsuz görüntülenebiliyor. Bu açıdan çoğu mobil uyumlu sayfalar akışkan arayüzle tasarlanır.

Tablet cihazlar yan tutulduğunda, genellikle 800px üzeri çözünürlüklere sahip oldukları için mfyz.com'u masaüstünüzdegördüğünüz tasarımıyla görüntüleyebileceksiniz. Dolayısıyla eğer mobil arayüzde eksik olan bir fonksiyonalite var ise tablet cihazınızda yatay konumda tüm fonksiyonlara sahip olacak. Çünkü mobil uyumlu sayfalar fonksiyonalite bakımından sadeleştirilmiş olabilir.

Çoğu tablet dikeyde 800'den daha düşük çözünürlüğe sahip olduğu için, tablet cihazınızı dikey konuma getirdiğinizde mfyz.com'un mobil arayüzünü görmeye başlayacaksınız. Mobil uyumlu sürüm, okunabilirlik açısından font boyutu optimize edilmiş, arayüzü kaydırılan sayfalar şeklinde mobil uyumlu şekilde optimize edilmiştir.



Daha da ufak çözünürlükler için (500px'den küçük çözünürlükler için) font boyutu ve nagivasyon değşiklikleri olacak şekilde küçük ekranlı mobil sürümü görebileceksiniz.

Ayrıca aşağıdaki görselde küçük ekranlı mobil cihazlarda yatayda navigasyon dışındaki değişiklik dışında siteyi mobil uyumlu bir şekilde görebilirsiniz.

HTML5 Mobile

Mobil tarayicilarin destekledigi HTML5 ozellikleri tablosu, eger web app gelistiriyorsaniz kesinlikle goz atmakta fayda var.

http://mobilehtml5.org/
Apple Nisan 3'de yeni tablet oyuncağını piyasaya sürecek. Tabiki burada bu konuda bir haber yazmadım, çünkü hangi siteyi açsanız her yerde ipad'den bahsedildi, bir de benim maydonoz olmama gerek yoktu yani :-)

Bu aygıt hakkında neler düşünüyorsunuz? Bu güne kadar iphone'a uygun sayfalar tasarlama konusunda çok fazla birşey yapmadık, yani Türk geliştiricilerin çok da umursadığını ve bu konuda çalışma yapanların çok küçük bir kitle olduğunu düşünüyorum. Ancak bundan sonra mobil aygıtların çoğalacağı, artık web sayfalarında kullanılabilirlik ve erişilebilirlik açısından farklı şeyler düşüneceğimiz, tasarımları/yerleşimleri hatta interaksiyonları da buna göre şekillendireceğiz gibi görünüyor.

Bu konuda kimler birşeyler yapıyor ya da yapmaya hazırlanıyor?

Tablolar

Ana tablo etiketleri 3 tanedir, tablo tanımı, tablo satırı ve tablo hücresi.

table

Boş bir tabloyu ifade eder. içerisine girilen satır, sütun kuralları ile tabloyu oluşturur. Tablo hakkında genel bilgileri, ayarları içerir. Argümanları şöyle

bgcolor artalan rengini,
cellpadding tablo hücrelerindeki kenar boşluklarını,
cellspacing tablo hücrelerinin birbirleri arasındaki boşluğu,
border tablo ve hücrelerini belirleyen çerçeveyi ayarlar.

tr (Table Row : Tablo Satırı)

Tabloda satırlar eklemeden sütun ekleyemezsiniz. Her sütun bulunması gereken satırın içerisinde yer alamalıdır. Satırdaki ortak özellikleri tr etiketinin parametreleri ile düzenleyebilirsiniz (örneğin, artalan rengini).

td (Table Data : Tablo Hücresi)

Tablodaki hücreler için tanımlanması gereken son etikettir. İçinde bulunduğu satırda bir sütunu ifade eder.

Örnek tablo yapısı ;
<table border="1" cellpadding="5">
  <tr bgcolor="#CCCCCC">
    <td bgcolor="#FFFFFF">
      1.Sütun
    </td>
    <td>2.Sütun</td>
    <td>3.Sütun</td>
  </tr>
</table>
Öncelikle çerçevesi geçerli renk ve stilde 1 piksellik boş tablo tanımlanıyor. 1 satır, artalan gri olarak tanımlanıyor. 1. Sütunda artalan sadece o hücre için beyaz belirleniyor. Diğer sütunlarda ise tr etiketinde tanımlanan gri renk artalan olarak belirlenmiş oluyor. Yukarıdaki kodun çıktısı ;

1.Sütun2.Sütun3.Sütun

Önemli NOT : Her satırdaki sütun sayısı eşit olmalıdır. Eşit olmayan tabloların yapısı bozuktur.

Bir hücre kendi dengindeki hücrelerden kapsaması gereken kadar hücreyi td etiketinde cospan ve rowspan parametreleri belirtilerek ayarlanabilir.

Çerçeveler

Çerçeveler konusunda tek önerim, iç çerçeveler dışında çerçeve tekniği kullanmamanız doğrultusunda olacaktır. İç çerçeveler sayfalarda resim gibi belirli bir alan kaplayan ve o alan içerisinde sanki tarayıcı penceresi oraya sığdırılmış gibi görüntülenir. Eğer çok kolonlu veya çok satırlı sayfalar yapmak istiyorsanız tablo yapısını kullanarak öncelikle iç çerçeveleri sığdıracağımız alanı belirler, stillerle destekli iç çerçeve ekleyerek o çerçeveler içerisinde sayfalarımızı görüntüleriz. Bu işin normal methodunda ise neredeyse aynı mantığa sahip bir yapıyla, birden çok sayfa kullanırız. kod olarak aynı hatta daha fazla alan kaplayan dosyalar hazırlamış oluruz. Bana güvenin ve sadece bunu öğrenin. Örnek kod vermek gerekirse;
<iframe src="menu.htm" frameborder="0" width="100%" height="200">
menu.htm dosyasını bütün satır genişliğinde (yani 100%), 200 piksel uzunlukta ve çerçevesiz görüntüler.

İç çerçevelerin normal çerçevelerden farkı, istediğiniz yere koyabilmenizdir. normal çerçevelerde kurallar konuşur o açıdan hiç öğrenmeye bile gerek yoktur. Hatta gerek olmadıkça çerçeve bile kullanmayın.


Hazırlayan : Mehmet Fatih YILDIZ

Bu döküman 30.02.2008 tarihinde yeniden düzenlenmiştir.

Popüler Etiketler

javascript js html meta social tool ios mobile development blog linux konsol iOS icon ikon grafik download firefox banner calendar php logo macosx apple osx player less css language style assets framework ide editor phpstorm jetbrains deployment version control svn git newsletter mail kitap ie css3 support browser sitemap generator google chart api search ajax jquery xhtml rss pear mdb2 prepare execute injection mysql pgsql sql mssql session cookie subversion zaman radio button switch facebook opengraph fql optimization örnek kod itunes app ui design tebrik coding www subdomain redirect crossdomain url service connect box xml export pharma hack wordpress seo apache kurulum subscription startups browsers iphone ipad twitter bootstrap network htaccess route router mod_rewrite internet explorer query select gimp howto nasıl html5 table kontrol yapıları if while widget wireless plugin app store store in-app purchase purchase verification integration storekit itunes connect server login mfyz internet statistics optimizasyon workspace mootools ipucu terminal media imza signature ux webkit form regex spam screen share cms wanda proje kampanya xmlhttprequest date tarih db database doritos tytz icons portfolio developer input cache auth link ubuntu istatistik insanlar object sosyal medya graph license lisans ruffles analyse procedure compile nedir free lifestream compiler windows on-the-fly code music diff dokuman textarea oyun job open source applications notebook laptop web app http digital fstab ntfs parse