بعد أن إنتهينا من أساسيات تصميم الويب للهاتف النقال لابد أن يكون هناك مثال عملي على ما ذكرته  في بداية السلسلة. يمكن إيجاد الكثير من التصاميم الجاهزة لتحل محل نسخة الهاتف النقال لأي موقع ويب أو مدونة مثل التصاميم البسيطة التي تأتي مع إضافات الووردبريس المتخصصة في توفير نسخة الهاتف للمدونات، وهي تفيد المدونين بدلاً من البحث عن تصميم جديد لمتصفحي المدونة من الهاتف النقال.

ولكن هذا لا يمنع من عمل نسخة من البداية خاصة إن كنت تريد ترتيب ظهور عناصر محتويات الموقع وتحديد نوعية المحتويات التي تريدها أن تظهر في البداية عند تصفح المستخدم. في هذا الدرس سوف أوضح تصميم صفحات ملائمة لمستخدمي الهاتف النقال أو نسخة موقع لمستخدمي الهاتف النقال.

لم أحدد مثال معين لتطبيق الدرس ولكن اخترت مدونتي ليكون المثال عليها فالنسخة الأصلية لتصميم ترونها عند زيارتكم للمدونة من أي متصفح على أنظمة تشغيل سطح المكتب، لذا سأقوم بشرح عمل نسخة خاصة لمستخدمي الهاتف النقال، إضافةً إلى تغييرات على بعض الأشياء للتصميم الذي سيظهر لمستخدمي الهواتف التي تفوق عرض 240 بيكسل مثل هاتف iPhone (حيث عرض الشاشة 320 بيكسل) وذلك للصور المستخدمة مثل شعار وروابط الموقع.

النسخة الأولية للمدونة

نبدأ المثال بتحليل النسخة الأصلية للمدونة وذلك بتحديد العناصر المهمة لشطب العناصر الغير مهمة والعمل على العناصر المتبقية، فائدة ذلك في حل المشاكل الحالية وهي كثرة العناصر والصور والنصوص المحملة إضافةً إلى عرض الصفحة الغير مناسب الذي يتكون من عمودين في المحتويات، النقطة الأخيرة سنتطرق لها عند بداية عملية التصميم.

حددت هدف التصميم وهو أن يكون التصميم بسيط وسهل الاستخدام من خلال ترتيب العناصر وتحديد عرض التصميم كامل بدون تكبير وتصغير شكل التصميم.

كما أني حددت الصفحات التي سيتم تصميمها لشكل المدونة وهي الصفحة الرئيسية وصفحات ومواضيع المدونة والتعليقات وصفحة الأرشيف.

نسخة الهاتف النقال

بعد أن حددنا العناصر الرئيسية للمدونة نبدأ بتصميم نسخة الهاتف، أول شيء سأعتمد على إضافة ووردبريس وهي إضافة mobilePress لأن الصفحات الأساسية هي ديناميكية بالأصل وأيضاً توفر الإضافة إمكانية تحديد قالب آخر لمستخدمي الهاتف النقال تماماً كالقوالب الموجودة في مسار wp-content/themes/.

قبل إنشاء القالب في الووردبريس سأقوم بعمل القالب على صفحات HTML قبل دمجها بشفرات لغة PHP واعتبرها أفضل طريقة لتصميم القوالب لسهولة التعديلات وتقليل أخطاء HTML، كذلك قبل تحديد المنصة أو التطبيق الذي ستضع به القالب (مثل الووردبريس).

ترتيب المحتوى حسب الأولوية

يجب تحديد ترتيب المحتويات وذلك بتحديد أولوية العناصر أي كيف تريد أن تظهر المحتويات لديك ولدى المستخدم عند تصفّح الهاتف؟ هذا ما يجب أن نقوم بتحديده قبل عملية التصميم، هذه عدة نماذج لأنماط عناصر الشكل وإخترت النمط الأول وإعتمدت عليه في القالب:

بناءاً على النمط الذي إخترته قمت بعمل نموذج للتصميم قبل تقطيعه مع تحديد الألوان وعناصر التصميم.

كتابة عناصر XHTML

نأتي للخطوة العملية من الدرس، سنطبق التصميم على لغة الترميز XHTML 1.0 Transitional علماً بوجود نسخة خاصة للهواتف مطابقة للغة نفسها وهي XHTML Mobile Profile وتحتوي على أغلب مميزات XHTML الأساسية لذا نستطيع الاعتماد عليها مباشرةً.

قبل البدأ بكتابة محتويات XHTML نقوم بإعداد رأس محتوى XHTML عن طريق محتوى الوسم head، بالنسبة للهواتف النقالة توجد عدة نقاط يجب الانتباه لها قبل كتابة الشفرات وعند ظهور المحتويات في المتصفح.

تمرير التصميم وإمكانية التكبير والتصغير

من الهواتف الذكية من يتيح إمكانية تصغير وتكبير التصميم خاصة عند ظهور تصاميم المواقع بعرض يفوق عرض شاشة الهاتف حيث يتم تصغير شكل التصميم ليقوم المستخدم بتكبيره، عند تصميم موقع لمستخدمي الهاتف النقال فذلك أيضاً يحدث إلا إذا استخدمت قيمة في وسم meta في رأس الصفحة تسمى viewport بحيث تساعدك على تثبيت عرض الصفحة وإلغاء ميزة التكبير والتصغير.

تكتب قيمة viewport في وسم meta كما ترى في السطر التالي:

<meta name="viewport" content="width=[floating-point]; height=[floating-point]; user-scalable=[boolean]; initial-scale=[floating-point]; maximum-scale=[floating-point]"/>

كما تلاحظ لدينا خمسة قيم أخرى في محتوى viewport وهي:

  • width: إشارة إلى عرض الصفحة وتقاس بالبيكسل Pixel أو بطريقة النقطة العائمة، يمكن إختيار عرض قياس الشاشة بإستخدام قيمة device-width.
  • height: إشارة إلى إرتفاع الصفحة وتقاس بالبيكسل Pixel أو بطريقة النقطة العائمة، يمكن إختيار عرض قياس الشاشة بإستخدام قيمة device-height.
  • user-scalable: إشارة إلى إمكانية تحريك التصميم عند تكبيره على المستوى الأفقي والعمودي، يمكن الإشارة بقيمة منطقية برقم 1 أو 0 تعني True أو False.
  • initial-scale: إشارة إلى قيمة التحريك في البداية (عند ظهور التصميم) يتم الإشارة إليها بقيمة رقمية تكتب بطريقة النقطة العائمة مثل 1.0، 1.5، وهكذا. (إذا إخترت قيمة initial-scale=1.0 فإن التصميم يكون ثابت لا يدعم ميزة التكبير)
  • maximum-scale: إشارة إلى قيمة أعلى حد للتحريك (عند ظهور التصميم) يتم الإشارة إليها بقيمة رقمية تكتب بطريقة النقطة العائمة مثل 1.0، 1.5، وهكذا. (إذا إخترت قيمة maximum-scale=1.0 فإن التصميم يكون ثابت لا يدعم ميزة التصغير)

إذا أردنا تطبيق ذلك في رأس الصفحة بحيث لا نتيح إمكانية التحريك على المستوى الأفقي ويكون العرض ثابت بناءاً على عرض شاشة الهاتف نفسه فنكتب قيمة viewport بهذه الطريقة:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

تحقيق أمثلية الشفرة المصدرية

لأسباب تتعلق بظهور المحتويات على محركات البحث وتوافق التصميم على المتصفحات القديمة الموجودة في الهواتف يتم استخدام قيمة HandheldFriendly في وسم meta كذلك للتعبير عن تحقيق الأمثلية في طريقة كتابة لغة الترميز XHTML. لست متأكداً تماماً من استخدام هذه القيمة لهذا الغرض ولم أستخدمه في تطبيق الدرس لأنه لا يغير في النتيجة مقارنة باستخدام قيمة viewport.

<meta name="HandheldFriendly" content="True" />

وضع أيقونة خاصة لمستخدمي هاتف iPhone

تفيد الأيقونة التي ستضعها للمستخدمين إمكانية حفظ رابط الموقع بجانب تطبيقات هاتف iPhone مع الإحتفاظ بالأيقونة الخاصة بالموقع بدون وضع أيقونة عشوائية من الهاتف نفسه وستظهر الأيقونة عند حفظ المستخدم للرابط ووضعها ضمن التطبيقات الموجودة في اللوحة الرئيسية، يمكن تحديد الأيقونة عن طريق وسم link في قيمة تسمى apple-touch-icon، تكتب في شفرة XHTML بهذه الطريقة:

<link rel="apple-touch-icon" href="icon.png"/>

إسم الأيقونة غير مهم ولكن يجب أن يكون في المسار الصحيح إضافةً إلى أن تكون قيمة خاصية rel هي apple-touch-icon إضافةً إلى حجم الأيقونة الخاص بتطبيقات iPhone وهو 57×57، ستشاهد مثال على أيقونة لمدونتي في أسفل الموضوع.

محتوى شفرة XHTML كاملة

الآن نبدأ بأول شفرة للمثال في رأس الصفحة ستتكون من الوسم Doctype ورأس الصفحة وجسم الصفحة:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <title>مدونة مبدع</title>
</head>

<body>

</body>
</html>

تم إستخدام XHTML Transitional مع إدراج وسم meta ذات قيمة viewport لتثبيت عرض الصفحة، الآن بداخل جسم الصفحة نضع العناصر التي إخترناها في بداية الدرس، نبدأ بعناصر الصفحة الرئيسية:

<!-- Wrap -->
<div id="wrap">

<!-- Header -->
<div id="header">
    <a href="#"><img src="images/logo-brand.png" alt="مدونة مبدع" width="283" height="60" /></a>
</div>
<!-- /Header -->

<!-- Middle -->
<div id="middle">

    <!-- Navigation -->
    <div id="navigation">
        ..
    </div>
    <!-- /Navigation -->

    <span class="promotion"><a href="http://twitter.com/mobde3net/"><img class="twitter" src="images/twitter-link.png" width="94px" height="18px" alt="" /></a></span>

    <h2 class="main-title">أقسام المدونة</h2>

    <!-- Categories -->
    <div class="menulist">
        ..
    </div>
    <!-- /Categories -->

    <h2 class="main-title">آخر المواضيع المطروحة</h2>

    <!-- Menulist -->
    <div class="menulist posts">
        ..
    </div>
    <!-- /Menulist -->

    <!-- Pagination -->
    <div class="pagebar">
        ..
    </div>
    <!-- /Pagination -->

</div>
<!-- /Middle -->

    <!-- Footer -->
    <div id="footer">
        <p class="search"><input class="text" name="search" type="text" /> <input class="submit" name="submit" type="submit" value="بحث" /></p>
        <p><a href="#">رؤية المدونة بالقالب الأصلي</a> | <a href="#">للمراسلة</a></p>
        <p>تصميم وتطوير أحمد الكثيري</p>
    </div>
    <!-- /Footer -->

</div>
<!-- Wrap -->

الشفرة السابقة ليست كاملة بالقوائم مثل قائمة الصفحات وقائمة آخر المواضيع المطروحة وأقسام المدونة .. هذه فقط للصفحة الرئيسية، كذلك إستخدمت الصورة كشعار مدونة إضافةً إلى إضافة رابط للصورة يشير إلى المدونة، أما في السطر 19 فهي صورة أخرى أيضاً على شكل رابط لحسابي على خدمة تويتر لمتابعة آخر التحديثات.

بالنسبة لصفحات الإرشيف والبحث فهي لا تختلف عن تركيبة الصفحة الرئيسية حيث جميعها تحتوي على قائمة المواضيع الخاصة بالقسم أو بكلمة البحث المعينة إضافة إلى قائمة الأقسام التي إخترت أن تكون ثابتة في جميع الصفحات ( أعلى الصفحة الرئيسية وأسفل بقية الصفحات).

لذا يمكن عملها بكل سهولة ولكن إذا أردت تطبيق ذلك في الووردبريس سيتم إستخدام أوسمة القالب Template Tags في إستخراج محتويات المدونة من مواضيع وكتابة الأوامر الشرطية وحلقات التكرار الموجودة في ملفات PHP، كما أني سأوفر قالب المدونة (الخاص بمستخدمي الهاتف النقال) مجاناً للتحميل للإستفادة منه في تحليله أو إستخدامه في المدونات مع أنه مخصص لمدونتي.

يتبقى لدينا شيء واحد وهو كتابة تركيب عناصر صفحة الموضوع في XHTML (الذي يمكن الوصول له عن طريق ملف single.php في الووردبريس)، تحتوي هذه الصفحة على محتوى الموضوع وقائمة التعليقات التابعة للموضوع وإمكانية التعليق، هذه شفرة سريعة لكيفية تنسيق محتوى الموضوع في تركيبة XHTML:

<!-- Content -->
<div id="content">
    <h2>عنوان الموضوع</h2>

    <p>المحتوى الخاص بالموضوع ..</p>

</div>
<!-- /Content -->

<h2 class="main-title">تعليقات الموضوع</h2>

<!-- Comments -->
<div id="comments-list">

    <div id="comment-ID" class="comment">
        <h3>إسم المعلق</h3>
        <small class="date">تاريخ التعليق</small>

        <div>
            <p>محتوى التعليق ..</p>
        </div>
    </div>

</div>
<!-- /Comments -->

<h2 class="main-title">أترك تعليق</h2>

<!-- Add-Comment -->
<div id="respond">

	<div id="add-comment" class="add-comment">
		<form action="#" method="post">

			<p><label for="author">الإسم </label> <input class="text-input" type="text" name="author" id="author" tabindex="1" /></p>

			<p><label for="email">البريد الإلكتروني (لن ينشر) </label><input class="text-input" type="text" name="email" id="email" tabindex="2" /></p>

			<p><label for="url">عنوان الموقع</label><input class="text-input" type="text" name="url" id="url" tabindex="3" /></p>

            <p><textarea class="text-textarea" name="comment" id="comment" cols="40" rows="10" tabindex="4"></textarea></p>

            <p><input name="submit" type="submit" id="submit" tabindex="5" value="أضف تعليقك" /></p>

		</form>
	</div>

</div>
<!-- /Add-Comment -->

تنسيق العناصر بتقنية CSS

الآن ندخل في الجزء الذي يتعلق بتنسيق الواجهة بواسطة تقنية CSS، لابد أن تنتبه لأمر مهم قبل التنسيق مراعاةً للشكل الذي سيكون في الواجهة وهو إستخدام النسب المئوية وقياس em بدلاً من قياس px (بيكسل)، وذلك لتتناسب العناصر مع عرض الشاشة كما يمكن إستخدام قياس px ولكن بشكل محدود في العناصر.

بإستخدام إضافة mobilePress في الووردبريس جعلت تطبيق المثال الموجود في الدرس (تستطيع مشاهدته في نهاية الموضوع) لمستخدمي iPhone لسببين: الأول بسبب نسبة إستخدام هذا الهاتف في السوق مقارنة مع بقية الهواتف التي تستخدم في تصفح الإنترنت، السبب الثاني هو دعمه لتقنية CSS3 وبقية الخصائص عن طريق متصفح iPhone Safari الذي يستخدم محرك Webkit.

وإستخدمت نسخة خفيفة جداً موجودة بشكل إفتراضي في قالب الإضافة مع تعديل ملف CSS ليتناسب مع ألوان المدونة وإتجاه التصميم من اليمين إلى اليسار إضافةً إلى تعريب القالب ليتناسب مع المستخدمين.

الآن نبدأ تنسيق التصميم الخاص بهذا الدرس من خلال شفرات تقنية CSS، نبدأ أولاً بتصفير عناصر HTML قبل إعادة تنسيقها:

html, body, h1, h2, h3, h4, h5, p, ul, li, img, small,a,input {
    margin: 0;
    padding: 0;
    background: none repeat scroll 0 0 transparent;
    list-style: none;
    border: 0;
    text-decoration: none;
}

تنسيق خلفية الصفحة عبر الوسم body:

body {
    direction: rtl;
    text-align: center;
    background: url('images/background.jpg') repeat 0 0;
}

توسيط التصميم وتحديد إتجاه الكتابة إلى اليمين:

#wrap {
    text-align: right;
}

#middle {
    margin: 0 3%;
}

تنسيق رأس الصفحة الذي سيكون فيه شعار المدونة:

#header {
    background: url('images/header-background.jpg') repeat #d0d0d0;
    border-bottom: 2px solid #909090;
    height: 60px;
}

#header a {
    display: inline-block;
}

تنسيق قائمة الصفحات (الصفحة الرئيسية، السيرة الذاتية، صفحة المراسلة):

#navigation {
    padding: 15px 0 0;
}

#navigation ul {
    background: url('images/navigation-background.png') repeat-x 0 0 #FFFFFF;
    border: 1px solid #999999;
    overflow: hidden;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#navigation ul li {
    width: 33.3%;
    float: right;
}

#navigation ul li a {
    display: block;
    text-align: center;
    color: #a90014;
    padding: 5px 0;
    border-left: 1px solid #999999;
    font: Bold 0.95em "Times New Roman", Serif;
}

#navigation ul li:last-child a {
    border: 0 none;
}

تنسيق رابط ترويجي للمدونة مثل وضع رابط حسابي على تويتر لمتابعة آخر المواضيع:

span.promotion {
    margin: 15px 0;
    background: url("images/promotion-background.png") repeat scroll 0 0 #FFFFFF;
    border: 2px solid #fff;
    text-align: center;
    display: block;
    height: 30px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 3px 2px #B0B1B1;
    -moz-box-shadow: 0 3px 2px #B0B1B1;
    -webkit-box-shadow: 0 3px 2px #B0B1B1;
}

span.promotion .twitter {
    padding: 7px;
}

تنسيق العناوين الرئيسية للقوائم عبر الوسم h2:

h2.main-title {
    background-color: #D9D9D9;
    border: 1px solid #959696;
    color: #363532;
    font: bold 0.95em "Times New Roman", Serif;
    padding: 5px 10px;
    text-shadow: 0px 1px 0 #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

تنسيق القوائم الرئيسية لروابط المدونة مثل (أقسام المدونة) و (آخر المواضيع المطروحة):

.menulist {
    padding: 10px 0 15px;
}

.menulist ul {
    background-color: #FFF;
    border: 1px solid #C0C0C0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.menulist ul li a small {
    color: #000;
    display: block;
    font-size: 0.85em;
    font-weight: normal;
    padding: 10px 0 0;
}

.menulist ul li a {
    color: #707070;
    display: block;
    font: bold 0.95em "Times New Roman", Serif;
    padding: 10px;
    border-bottom: 1px solid #C0C0C0;
}

.menulist ul li:last-child a {
    border: 0 none;
}

.menulist.posts ul li {
    background: url('images/goto.png') no-repeat 10px center;
}

.menulist.posts ul li a {
    padding: 25px 10px 25px 25px;
}

تنسيق محتوى مواضيع وصفحات المدونة:

#content {
    margin: 15px 0;
    background-color: #FFFFFF;
    border: 1px solid #999999;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

}

#content p {
    color: #3F3F3F;
    font: bold 0.95em/1.6em "Times New Roman",Serif;
    margin: 20px 0;
    text-align: right;
}

#content a { color: #F00000; }

#content ul li {
    color: #3F3F3F;
    font: bold 0.95em/1.6em "Times New Roman",Serif;
    margin: 20px 10px;
    padding: 0 20px 0 0;
    text-align: right;
    background: url('images/arrow.gif') no-repeat right 11px;
}

#content h2 {
    color: #c60017;
    font: bold 1.25em "Times New Roman",Serif;
    margin: 5px 0 10px;
}

#content h3 {
    color: #000;
    font: bold 1.1em "Times New Roman",Serif;
    margin: 15px 0 5px;
}

#content h4 {
    display: inline-block;
    font: bold 1.05em/1.6em "Times New Roman",Serif;
    padding: 0 0 3px;
    margin: 15px 0 5px;
}

#content img {
    max-width: 250px;
    height: auto;
    width: auto;
}

تنسيق قائمة ترقيم المواضيع والصفحات Pagination:

.pagebar {
	padding: 13px 0 20px;
    display: block;
}

.pagebar .this-page, .pagebar a, .pagebar .break {
	margin: 0 0 5px 3px;
    padding: 5px 7px;
	font: bold 0.95em "Times New Roman",Serif;
	background: url("images/navigation-background.png") repeat-x scroll 0 0 #FFFFFF;
	color: #707070;
    border: 1px solid #C0C0C0;
    display: inline-block;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.pagebar .this-page {
	color: #000;
    border: 1px solid #5a5a5a;
    background-color: #f5f2e5;
}

تنسيق قائمة التعليقات:

#comments-list {
    background-color: #FFF;
    border: 1px solid #999999;
    margin: 15px 0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

#comments-list .comment {
    border-bottom: 1px solid #999999;
    padding: 10px;
}

#comments-list .comment:last-child {
    border: none 0;
-moz-border-radius-bottomleft: 10px !important;
-moz-border-radius-bottomright: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

#comments-list .comment.alt {
    background-color: #f9f9f9;
}

#comments-list .comment h3 {
    font: bold 1.1em "Times New Roman",Serif;
    color: #707070;
}

#comments-list .comment p {
    color: #333333;
    font: bold 0.95em/1.6em "Times New Roman",Serif;
    margin: 10px 0;
}

#comments-list .comment em {
    color: #cc0000;
    display: block;
    font: 0.84em "Times New Roman",Serif;
    margin: 5px 0;
}

#comments-list .comment h3 a {
    color: #cc0000;
}

#comments-list .comment p a {
    color: #cc0000;
}

#comments-list small.date {
    display: block;
    font: italic 0.9em "Times New Roman",Serif;
    margin: 1px 0;
}

تنسيق نموذج إضافة التعليق:

#respond{
    background-color: #FFF;
    border: 1px solid #999999;
    margin: 15px 0;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

}

#respond p {
    font: bold 0.95em/1.6em "Times New Roman",Serif;
}

#respond a {
    color: #CC0000;
}

#respond label {
    display: block;
    margin: 5px 0;
}

#respond input.text-input {
    margin: 0 0 10px;
    width: 99%;
    padding: 2px 3px;
    height: 23px;
    background: url("images/input-background.png") repeat-x scroll 0 -8px #FFFFFF;
    font: bold 0.95em "Times New Roman",Serif;
    border: 1px solid #828282;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

}

#respond textarea {
    margin: 0 0 10px;
    width: 99%;
    padding: 2px 3px;
    background: url("images/input-background.png") repeat-x scroll 0 -8px #FFFFFF;
    font: bold 0.95em "Times New Roman",Serif;
    border: 1px solid #828282;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#respond input#submit {
    margin: 0 0 10px;
    border: 0 none;
    background: url("images/add-submit.png") no-repeat scroll 0 0 transparent;
    height: 27px;
    text-indent: -9999px;
    width: 70px;
}

تنسيق ذيل الصفحة والذي سيتم إضافة رابط للرجوع إلى القالب الأصلي إضافةً إلى وجود محرك البحث الخاص بالمدونة:

#footer {
    padding: 10px 0;
    min-height: 90px;
    border-top: 2px solid #c9c9c9;
    background-color: #e4e4e4;
    box-shadow: 0 4px 10px #BFC2C5 inset;
    -webkit-box-shadow: 0 4px 10px #BFC2C5 inset;
    -moz-box-shadow: 0 4px 10px #BFC2C5 inset;
}

#footer p {
    text-align: center;
    padding: 5px 0 10px;
    font: Bold 0.95em "Times New Roman", Serif;
}

#footer p, #footer a {
    color: #3f3f3f;
}

#footer a { padding: 2px 2px 4px; border-bottom: 1px dashed #3f3f3f;}

#footer p.search {
    margin: 0 auto;
    width: 200px;
    overflow: hidden
}

#footer p.search input.text {
    background: url("images/input-background.png") repeat-x scroll 0 0 #fff;
    border: 1px solid #828282;
    font: Bold 0.95em "Times New Roman", Serif;
    height: 23px;
    padding: 1px 3px;
    width: 135px;
    float: right;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#footer p.search input.submit {
    background: url("images/search-submit.png") no-repeat scroll 0 0;
    border: medium none;
    font: Bold 0.95em "Times New Roman", Serif;
    height: 27px;
    width: 53px;
    text-indent: -9999px;
    float: left;
}

تغيير حجم الخطوط في متصفح iPhone Safari، سأتحدث عنها أيضاً في نقطة مستقلة:

html { -webkit-text-size-adjust: none; }

هذه أيضاً بعض النقاط المهمة في CSS لتنسيق الصفحات المستعرضة على متصفحات الهواتف النقالة.

إستخدام خاصية media في الوسم style

يمكن الإستفادة من إستخدام خاصية media في CSS لتحديد بعض الأمور، هذه أمثلة على إستخدامات خاصية media ستفيدك لاحقاً، يمكن أن أيضاً إستخدامها إذا أردت إختزال القالب الأصلي دون إنشاء قالب جديد بحيث يظهر القالب الأصلي ولكن بتعديلات في CSS تناسب متصفحات الهواتف النقالة.

لعمل تنسيق خاص لمستخدمي هاتف iPhone او أي هاتف يمكن أن يصل عرض المتصفح فيه إلى 480px:

<style type="text/css" media="only screen  and (max-device-width: 480px)">
	..
</style>

لتحديد تنسيق خاص بالوضعية العمودية في هاتف iPhone أو وضعية Portrait:

<style type="text/css" media="all and (orientation:portrait)">
	..
</style>

لتحديد تنسيق خاص بالوضعية الأفقية في هاتف iPhone أو وضعية Landscape:

<style type="text/css" media="all and (orientation:landscape)">
	..
</style>

لتحديد تنسيق خاص بالهواتف المحمولة عموماً:

<style type="text/css" media="handheld">
	..
</style>

ملاحظة: ليس شرطاً تطبيق ذلك عن طريق وسم meta كما كتبت في السابق ولكن يمكن أيضاً عن طريق خاصية media في ملف CSS نفسه وهذه أحد خصائص CSS3، مثال على تحديد تنسيق خاص بأي هاتف يمكن أن يصل عرض المتصفح فيه إلى 480px:

@media only screen  and (max-device-width: 480px) {
	div { .. }
}

هناك الكثير من التفاصيل حول ميزة خاصية media في CSS3 يمكنك القراءة عنها.

منع تغيير حجم الخط عند تغيير وضعية الهاتف

هذا يتعلق بهاتف iPhone فهو يتكون من وضعيتين [أفقية وعمودية]، واحدة تسمى Portrait (عندما يكون الهاتف الوضع العمودي) والأخرى Landscape (عندما يكون الهاتف في الوضع الأفقي)، وتوضح هذه الصورة ما أقصد في هذه الفقرة:

لتثبيت أحجام الخطوط نستخدم خاصية في CSS3 وهي خاصية -webkit-text-size-adjust وتكتب بهذا الشكل:

html { -webkit-text-size-adjust: none; }

تصغير الصور بشكل تلقائي

بالتأكيد قياسات الصور الموجودة في المواضيع تتخطى عرضها أكثر من شاشة الهاتف، لذا يجب أن تكون صغيرة الحجم أقل من قياس شاشة الهاتف، يمكن تصغير جميع الصور التي تعرض في المحتويات تلقائياً مع المحافظة على أبعاد الصورة في العرض والإرتفاع عبر هذه الشفرة:

#content img {
	max-width: 250px;
	height: auto;
	width: auto;
}

الصنف #content يشير إلى محتوى الموضوع أو الصفحة في مثال الدرس ومن خلاله سيتم إدراج الصور، كما أن خاصية max-width في CSS تشير إلى الحد الأقصى لعرض الصورة وحددت العرض الأقصى هو 250px وسيكون أصغر من شاشة هاتف iPhone الذي شاشة عرضه هي 320px، مع الإنتباه أن عرض شاشات الهواتف القديمة أو البسيطة التقليدية أقل من 240px.

النتيجة النهائية

بعد أن انهينا العمل على النسخة هذه بعض نماذج للنسخة على هاتف iPhone مع ظهور الأيقونة المخصصة للمدونة عند حفظ الصفحة.