منتدى استراحات زايد - كيف تصمم نسخة من موقعك لمتصفح Safari في iPhone/iPod Touch

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

طبعا، يوجد العديد منّا من يمتلك موقعا خاصا به، و الآن مع تزايد استخدام متصفحات الهواتف، و بالأخص iPhone، فبات من المفضل أن يكون موقعك يدعم متصفحات الهواتف.

و اليوم بإذن الله سنشرح كيفية عمل نسخة من موقعك تتناسق مع متصفح الـ iPhone/iPod Touch، أو الـ Safari، و التعرف على دوران الجهاز، ليكون جهازك متوافق كليا في أي وضعية للجهاز.

نبدأ باسم الله:

كأي صفحة موقع عادية، لابد أن تكون مبدوئة بكود الـ HTML الطبيعي، و ليكن:

كود:

Website for iPhone

السطور الـ 3 و الـ 4 و الـ 6، تقريبا ستكون جديدة عليك، و هي كالتالي:
السطر الثالث: يجبر الصفحة أن تكون بنفس مقاس شاشة الـ iPhone. فعادة ما يتم هو أن تكون شاشة الـ iPhone كنافذة و الموقع خلفية لها، ما يفعله هذا السطر هو أن يجبر الموقع بأن يكون بنفس مقاس شاشة الـ iPhone. الجزء الثاني منه يحدد الـ Scale للصفحة، فطالما نحن نصمم هذا الموقع خصيصا للـ iPhone، فلا نحتاج لأن تكون الصفحة مقربة.
السطر الرابع: هو لعمل أيقونة الصفحة عند عمل Bookmark لها في المتصفح. يجب أن يكون مقاس الصورة 57 بكسل × 57 بكسل و بامتداد png.
السطر السادس: جزء من تحديد دوران الجهاز. يقوم الـ iPhone بتنفيذ كود JavaScript كل مرة يتم فيها دوران الجهاز. هذا السطر لا يحدد اتجاه الدوران، كود الـ JavaScript هو من يقوم بذلك.

الآن لنضع محتويات الموقع، و لتكن مثلا بالشكل التالي:

كود:

iPhone Website

أنت الآن تمسك بالـ iPhone ناحية اليسار

أنت الآن تمسك بالـ iPhone ناحية اليمين

أنت الآن تمسك بالـ iPhone مستقيما

هذه الميزة غير مدعومة حاليا!!

الآن لنحلل هذا الكود:
أولا نحتاج تقسيمة الـ Wrapper، أو المغلف لكي نعمل في حيز معين، ولأن كود الـ JavaScript سيعمل على هذه التقسيمة.
ثانيا، سأضع صورة لوجو باستخدام الـ CSS، كتوضيح للمحتويات التي تظهر عند تدوير الجهاز.
ثالثا، متصفح الـ Safari حتى الآن يدعم أن تكون ممسكا بالجهاز مستقيما، أو مدورا إياه يمينا أو يسارا، لكن لا يدعم أن تكون ممسكا به مقلوبا. فقط وضعتها تحسبا لأن تكون متاحة في تحديث قادم مثلا، فيكون الموقع مستعدا.

جميل، الآن لننتقل لكود الـ CSS، و هو مهم جدا في عملية الدوران، حيث باستخدامه سنتأكد أن فقط المحتويات الصحيحة لطريقة الدوران تلك هي المعروضة.
أولا فقط علينا تحديد الـ CSS الأساسي للصفحة، لمنع تنسيق الـ iPhone الافتراضي من التدخل:

كود:
/*-----------------------------
RESET STYLES
-----------------------------*/

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
-webkit-text-size-adjust:none;
}
body{
font-size: 10px;
}
ul, li, ol, dl, dd, dt{
list-style:none;
padding:0;
margin:0;
}
a{
text-decoration:none;
}

أهم سطر في هذا الكود هو -webkit-text-size-adjust:none; حيث يمنع المتصفح من تكبير حجم الخط عند الدوران، و هو ما يفعله المتصفح عادة -وهو صحيح لأن عند الدوران يتم إبعاد الصفحة- لكننا قمنا بجعل الموقع يملأ الصفحة، فلا حاجة له.

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

كود:
/*-----------------------------
BASIC PAGE STYLING
-----------------------------*/

body{
background:#fff000;
font-family: Helvetica;
color:#999;
}
p{
font-size:12px;
padding-bottom:8px;
}
a{
color:#fff000;
text-decoration:none;
}

/*-----------------------------
HEADINGS
-----------------------------*/

h1{
display:block;
width:112px;
height:41px;
background-image:url(images/logo.gif);
text-indent:-5000px;
}

/*-----------------------------
BASIC LAYOUT
-----------------------------*/

#page_wrapper{
padding-top:20px;
background:#000 url(images/page_background.gif) repeat-x;
overflow:auto;
}

باستخدام هذا الكود، قمنا بتحديد خطوط و ألوان بعض العناصر في الصفحة.
ووضعنا لوجو و قمنا بتحديد الحير المغلف و باستخدام overflow:auto; نمنع أي محتويات عائمة -أي باستخدام كود float- من أن تكون خارج الحيز المستخدم.

الآن إلى الجزء الأكثر تعقيدا، هذا الكود سيحدد المحتويات التي ستظهر بناء على دوران الجهاز، و التي يتم التحكم فيها عن طريق كود الـ JavaScript الذي سنراه بعد قليل:

كود:
/*-----------------------------
ORIENTATION CLEVERNESS
-----------------------------*/

#content_left,
#content_right,
#content_normal,
#content_flipped{
display:none;
}

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

كود:
.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}

هذا الكود يحدد عرض المحتوى، فكما ترى عند امساكك بالجهاز مستقيما أو مقلوبا يكون العرض 320 بكسل، و عند امساكك به إلى اليمين أو اليسار يكون العرض 480 بكسل. إذا أنت تصمم موقع بالظبط على نفس أبعاد الشاشة، و ليس أكبر منها أي لن تحتاج لأن تنزل بالصفحة، يمكنك أن تضع height أيضا، لتحدد العرض و الطول.

كود:
.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
display:block;
}

هذا الكود هو المسئول عن إظهار فقط الجزء المقابل للجهة التي تمسك بها الجهاز، فحين يكون للـ #page_wrapper التنسيق الملائم من الأعلى، سيظهر هو فقط، و يتم التحكم فيها عن طريق كود الـ JavaScript.

والآن نأتي لأهم جزء، كود الـ JavaScript المسئول عن الدوران و تحديد إتجاهه:

كود:
window.onload = function initialLoad(){
updateOrientation();
}

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

كود:
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;

case -90:
contentType += "right";
break;

case 90:
contentType += "left";
break;

case 180:
contentType += "flipped";
break;
}
document.getElementById("page_wrapper").setAttribu te("class", contentType);
}

هذا هو الكود الذي يتعرف على أي جهة تدير الجهاز ناحيتها. و يجعلها هي المرئية فقط، و يضبط الـ class للـ #page_wrapper بحسب الجهة التي ستظهر.

إلى هنا، يكون تصميم الصفحة قد انتهي. لكن هناك خدعة ظريفة لتستخرج كل ما في متصفح الـ iPhone من امكانيات:

كود:
window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);

function loaded() {
document.getElementById("page_wrapper").style.visi bility = "visible";
window.scrollTo(0, 1); // pan to the bottom, hides the location bar
}

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

طبعا بعد أن قمت بتصميم الموقع للـ iPhone، فكيف ستدخل عليه؟! بما أنه نسخة من الموقع مخصصة للـ iPhone، و ليس الموقع كاملا المعروض على الكمبيوتر، فتحتاج لإضافة كود الـ JavaScript هذا في header موقعك الأساسي:

كود:
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://www.website.com/iphone/";
}

هذا الكود يتعرف على متصفح الـ iPhone و ينقلك للنسخة المخصصة له.

قمت أيضا بوضع نموذج للتصميم في فولدر و مرفق مع الموضوع.

أتمنى أن يكون الموضوع مفيدا و واضحا :)

تحياتي

الملفات المرفقة http://www.mobile4arab.com/vb/mobile...attach/rar.gif iphone.rar&rlm; (3.3 كيلوبايت)