Gönderen Konu: Smf Temayi Responsive Mobil Uyumlu Yapalim  (Okunma sayısı 732 defa)

Çevrimiçi orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 385
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Smf Temayi Responsive Mobil Uyumlu Yapalim
« : 21 Nis 2015, 07:45:27 »
Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu.

Responsive 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. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanır.

Bilindiği gibi web sitelerine mobil cihazlardan girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girdikleri site responsive yada mobil site değilse, okumak istedikleri alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler.

Responsive sitelere mobil cihazlardan girildiğinde menüler şekil değiştirip genellikle üstten açılacak şekilde kullanımı kolay bir versiyona dönüşür. Fontlar ve imajlar alt alta gelerek ekranda zoom yapmadan kolayca okunacak şekilde sıralanır. Hatta mobil versiyonda önem derecesi düşük elementler gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgi gösterilir.

Arama motorlarıda responsive siteleri ciddi şekilde destekliyor. Bir sayfanın arama motorlarında hem kendi alan adı hem de m.alanadi.com gibi farklı subdomain altında bir mobil versiyonunun olmasındansa tek url ile sayfanın responsive yapılması daha uygun buluyor. Çünkü mobilden yapılan aramalarda genellikle arama motorları sayfanın mobil uyumluluğuna dikkat etmeksizin sonuçları sıralıyor.

Ben sizlere Smf icin Anlatim yapiyorum anlatim defult tema icindir.

./Themes/default/index.template.php
Bul
Kod: [Seç]
<title>', $context['page_title_html_safe'], '</title>';Değiştir
Kod: [Seç]
<title>', $context['page_title_html_safe'], '</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />';
Bul
Kod: [Seç]
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';Değiştir
Kod: [Seç]
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/responsive', $context['theme_variant'], '.css?fin20" />';
Bul
Kod: [Seç]
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>Değiştir
Kod: [Seç]
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="responsive_menu ', $act, '"></span>

./Themes/default/Memberlist.template.php
Bul
Kod: [Seç]
<td class="windowbg2">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

if (!isset($context['disabled_fields']['website']))
echo '
<td class="windowbg">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

// ICQ?
if (!isset($context['disabled_fields']['icq']))
echo '
<td class="windowbg2">', $member['icq']['link'], '</td>';

// AIM?
if (!isset($context['disabled_fields']['aim']))
echo '
<td class="windowbg2">', $member['aim']['link'], '</td>';

// YIM?
if (!isset($context['disabled_fields']['yim']))
echo '
<td class="windowbg2">', $member['yim']['link'], '</td>';

// MSN?
if (!isset($context['disabled_fields']['msn']))
echo '
<td class="windowbg2">', $member['msn']['link'], '</td>';

// Group and date.
echo '
<td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
<td class="windowbg lefttext">', $member['registered_date'], '</td>';

if (!isset($context['disabled_fields']['posts']))
{
echo '
<td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
<td class="windowbg statsbar" width="120">';
Değiştir
Kod: [Seç]
<td class="windowbg2 hidden">', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</td>';

if (!isset($context['disabled_fields']['website']))
echo '
<td class="windowbg hidden">', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</td>';

// ICQ?
if (!isset($context['disabled_fields']['icq']))
echo '
<td class="windowbg2 hidden">', $member['icq']['link'], '</td>';

// AIM?
if (!isset($context['disabled_fields']['aim']))
echo '
<td class="windowbg2 hidden">', $member['aim']['link'], '</td>';

// YIM?
if (!isset($context['disabled_fields']['yim']))
echo '
<td class="windowbg2 hidden">', $member['yim']['link'], '</td>';

// MSN?
if (!isset($context['disabled_fields']['msn']))
echo '
<td class="windowbg2 hidden">', $member['msn']['link'], '</td>';

// Group and date.
echo '
<td class="windowbg lefttext">', empty($member['group']) ? $member['post_group'] : $member['group'], '</td>
<td class="windowbg lefttext hidden">', $member['registered_date'], '</td>';

if (!isset($context['disabled_fields']['posts']))
{
echo '
<td class="windowbg2" style="white-space: nowrap" width="15">', $member['posts'], '</td>
<td class="windowbg statsbar hidden" width="120">';

./Themes/default/Who.template.php
Bul
Kod: [Seç]
<td nowrap="nowrap">', $member['time'], '</td>Değiştir
Kod: [Seç]
<td nowrap="nowrap" class="hidden">', $member['time'], '</td>
./Themes/default/MessageIndex.template.php
Bul
Kod: [Seç]
<th scope="col" class="first_th" width="8%" colspan="2">&nbsp;</th>Değiştir
Kod: [Seç]
<th scope="col" class="first_th hidden" width="8%" colspan="2">&nbsp;</th>Bul
Kod: [Seç]
<th scope="col" width="14%">Değiştir
Kod: [Seç]
<th scope="col" width="14%" class="hidden">Bul
Kod: [Seç]
else
echo '
<th scope="col" class="lefttext" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';
Değiştir
Kod: [Seç]
else
echo '
<th scope="col" class="lefttext hidden" width="22%"><a href="', $scripturl, '?board=', $context['current_board'], '.', $context['start'], ';sort=last_post', $context['sort_by'] == 'last_post' && $context['sort_direction'] == 'up' ? ';desc' : '', '">', $txt['last_post'], $context['sort_by'] == 'last_post' ? ' <img src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.gif" alt="" />' : '', '</a></th>';

Dosya Değişiklikleri

Ekte bulunan "css/responsive.css" dosyasını "./Themes/default/css" dizinine kopyalayın.
Ekte bulunan "images/responsive_menu.png" dosyasını "./Themes/default/images" dizinine kopyalayın.

[eklenti yönetici tarafından silindi]
« Son Düzenleme: 13 May 2015, 20:03:03 Gönderen: Ata »