كيف تجعل جملة تتوافق مع iPad

قم بوضع مشاكلك مع القوالب هنا و كذلك تصميماتك لجوملا! أو تصميماتك بوجه عام

Moderators: sherif, General Support Moderators

Locked
User avatar
_MD_
Joomla! Intern
Joomla! Intern
Posts: 89
Joined: Mon Aug 27, 2007 8:22 am
Location: .:: Tripoli - Libya ::.
Contact:

كيف تجعل جملة تتوافق مع iPad

Post by _MD_ » Sun Jan 09, 2011 2:13 pm

Image
كيف تجعل جملة تتوافق مع iPad

من منا لم يسمع بأحد الإنجازات العلمية لشركة آبل والمتمثل في جهازها iPhone والجديد IPad بحيث أصبح الآيباد وسيصبح أحد الأجهزة المهمة في حياتنا سواء من خلاله مباشرة أو من خلال التطبيقات العديد التي أصبحت تتدفق على متجر آبل منها الطبية ومنها التجارية والعلمية وغيرها والتي أتفق الجميع على أهميته في حياتنا مستقبلاً.

ومن المعلوم أن آبل تستعمل متصفح Safari الخاص بالأجهزة المكتبية ولكن بشاشة ذات حجم 9.7 أنش ويستعمل متصفح Safari نفس عدة متصفح Safari الموجود على نظام تشغيل Mac OS X.. لذا فعند تصفح موقعك من خلال ها المتصفح ومن iPad عليك التأكد من أن موقعك متوافق معه ويعمل بشكل جيد.

بداية لتوافق جملة مع Safari علينا التفكير في قالب الموقع المصمم في جملة.. لا يجب أن نبالغ في تصميمه ووضع العديد من العناصر التي قد لا تكون مهمة للزائر.. حيث أن متصفح Safari سواء في iPad أو iPhone يختلف عن المتصفح العادي سواء بطريقة عرضه الأفقية أو العمودية.. فركز على عرض المعلومات من خلال القالب أكثر من عرض الأشياء الأخرى التي قد تفقدك قيمة القالب في كل من iPad أو iPhone كما يمكنك تصميم ملفات CSS لتتوافق مع عرض الموقع من خلالهم.. كما إن هناك إعدادات للمتصفح يجب توفرها لعرض موقعك فإن كانت غير متوفرة بموقعك فمن المستحسن أن تقوم بإعدادها بموقعك.. أي أن تقوم بتغيير إعدادات العرض وذلك بإضافة كود للقالب ولتحسين عرض الجهاز مع موقعك يجب إضافة علامة وصفية Meta Tag لملف index.php الخاص بالقالب.. كالتالي:

[code]<meta name="viewport" content="width=device-width" />[/code]

Image


ومن خلال هذا السطر ستضمن عرض موقعك على شاشة iPad أو iPhone بالشكل الصحيح.


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

Image


أيضا علينا استخدم css لإنشاء نمط Style Sheet محدد لنظام الآيفون.. كما إن css3 تتعرف على العديد من أنواع الوسائط بالإضافة إلى الطباعة والشاشة حيث أن نظام الآيفون يتجاهل إستعلامات الطباعة ووسائط الإعلام لإن هذه الأنواع لا تدعم محتوى الويب المتقدم.. لذلك إستخدم نوع وسائط شاشة الإستعلام لنظام الآيفون.


ولتحديد نمط خاص بالأيفون دون التأثير على الأجهزة الأخرى.. إستخدم كلمات رئيسية KeyWord مع مجموعة الكلمات الرئيسية للعرض في ملف HTML.. فالمتصفحات القديمة تتجاهل الكلمة الرئيسية فقط ولا تقرأ النمط الخاص بالايفون.. كما يمكنك استخدام device-width و max-device-width و min-device-width لوصف حجم الشاشة.


على سبيل المثال.. لتحديد نمط آيفون وأيبود تاتش. استخدم تعابير مشابهة كالتالي:


[code]<link media="only screen and (max-device-width: 480px)" href="/small-device.css" type= "text/css" rel="stylesheet">[/code]

لتحديد نمط الأجهزة الأخرى غير الآيفون.. استخدم تعبير مشابه للتالي:


[code]<link media="screen and (min-device-width: 481px)" href="/not-small-device.css" type="text/css" rel="stylesheet">[/code]


أيضاً بالإمكان استخدام هذا الشكل بداخل CSS مغلق بملف HTML أو في ملف CSS خارجي.. كالتالي:


[code]@media screen and (min-device-width: 481px) { ... }[/code]


كما هو الحال على iPhnoe فإن iPad لا يدعم تقنية الفلاش.. وهذا لا يمثل مشكلة لدى مستخدمي جملة حيث أن الفلاش ليس بجزء من النواة الأساسية لجملة.. فبالإمكان استخدام إضافات لتشغيل ملفات الفلاش في جملة.. رغم أنه من الأفضل في حالتنا هذه الإبتعاد عنه قدر الإمكان.. وهذا ينطبق على الإعلانات التي تستخدم الفلاش لعرض الإعلانات والبوم الصور وغيرها في جملة.. ويمكن الإستغناء عنهم بملحقات برمجية تستخدم آجاكس مثلاُ.


العمل من خلال إدارة جملة عبر iPad يختلف إختلاف كلي على iPhone فالأول أفضل وستشعر بالتشويق أثناء العمل وليس الحال كما هو لو كنت على iPhone.. كما إن بعض المطورين قاموا بإنشاء قوالب للوحة إدارة جملة للعمل بشكل افضل وممتاز من خلال iPad.. وعلى سبيل المثال قالب المدير Crisp من جملة Bamboo و كذلك قالب AdminPad من جملة Praise.

Image


وإذا كنت تخطط لتحسين عرض موقعك فقد ترغب بإضافة أنماط Style Sheet منفصلة لـ iPad.. كأن تضيف كود CSS إلى ملف templates.css وقد يختلف الملف في القوالب الأخرى.. لذا عليك البحث عن الملف المناسب للقالب الذي تستعمله للتحكم بقالبك.. مثلاُ في قوالب YooTheme يكون العمل على ملف custom.css.


ولنطلب من المتصفح بعض المعاملة الخاص.. نستخدم الكود التالي:


[code]@media only screen and (max-device-width: 1024px) {
/* Add your iPad specific CSS here */
div.right { display:none; }
}[/code]


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

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


ولتغيير عرض الشاشة في iPad نستخدم التالي في الوضع العمودي:

[code]@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
}[/code]


ولتغيير عرض الشاشة في iPad نستخدم التالي في الوضع الأفقي:


[code]@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
}[/code]

وكما قلنا فإنه بالإمكان أن نطلب من المتصفح أن يخفي العمود الأيمن أو الأيسر مثلا في

الشكل العمودي حتى تكون عملية عرض القالب بالشكل الأفضل.. مثلا ستختار أن تخفي العمود الأيمن عند عرض الموقع بالشكل العمودي.. بينما سيبقى بالشكل الطبيعي عند عرضه بالشكل الأفقي.


سنقوم بإخفاء العناصر الغير مرغوب فيها في الوضع العمودي في تصميم محدد كالتالي:


[code]/* iPad specific */
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
div#banner { display:none; } // Removes the banner
div#right { display:none; } // Removes the right column
div#main-shift { margin-right:0; } // Removes margin from the middle column
div#middle-expand { width:200%; }
div#content p { font-size:120%; } // Increases the size of the text
h1 { font-size:32px; } // Increases the size of the heading
div.joomla h1.title { width:100%; } // Makes the title use full width
div#top { display:block; } // Shows the top module
}[/code]


لاحظوا معي التالي:


display:none : وهو أمر لعدم العرض موجود أمام كل من البانر banner والقائمة اليمنى right.. وهو الخاص بحذف هذه العناصر عند العرض العمودي portrait.

margin-right:0: حذف الهامش في العمود الرئيسي main-shift.

font-size:120% : زيادة في حجم خط المحتوى content بنسبة 120%.

font-size:32px: زيادة في حجم خط العناوين heading وجعله بحجم 32 بكسل.

div.joomla h1.title: لجعل عنوان المقال يعرض بالشكل الكامل 100%.

div#top display:block : عرض الموديول العلوي.


وهكذا بحيث نطلب عرض مانشاء من القوائم والموديولات وحذف باقي العناصر من خلال ملف CSS.


بإمكانك إستخدام إضافة Firebug لمستخدمي متصفح FireFox للبحث عن العناصر التي تود حذفها من القالب عند العرض العمودي في iPad.. فهذه الإضافة تعرض لك العديد من المعلومات حول قطاع CSS و HTML في مواقع الويب. وبعد تثبيت هذه الإضافة قم بالنقر على الزر الأيمن فوق العنصر المراد حذفه أو إخفائه وأختر Inspect element فحص العنصر وسيتم فتح نافذة أسفل المتصفح.


عندها يمكنك مشاهدة قطاع HTML في الناحية اليسرى بينما قطاع CSS في الناحية اليمنى.. حيث يمكنك من خلاله تحرير الأنماط StyleSheet في المتصفح ومشاهدة المتغييرات مباشرة وفي نفس الوقت.. بحيث تقوم بالتجربة قبل أن تقوم بالتغيير على الملف مباشرة لتوفير الوقت والجهد.


Image


وفي الأخير لاتنسى إختيار ايقونة خاصة بموقعك عند عرضه في iPad أو iPhone وعند حفظه في المفضلة أو شاشة الجهاز.. يمكنك إنشاءها بقياس 114x114 بكسل.. ولا تستعمل الشفافية وأي تأثير لوضوح الأيقونة فنظام iOS سيتكفل بذلك.


قم بحفظ الأيقونة في مجلد القالب نفسه.. ثم قم بوضع علامة وصفية Meta Tag في ملف index.php الخاص بالقالب.. وبالتحديد عند العلامة الرأسية HEAD tag :


[code]<link rel="apple-touch-icon" href="/templates/YOURTEMPLATE/apple-touch-icon.png" />[/code]



حيث YOURTEMPLATE هو إسم القالب الخاص بك.

حيث apple-touch-icon إسم الأيقونة.


وللمزيد من المراجعة حول :


- إعدادات العرض لنظام iOS يمكنك الدخول هنا Configuring the Viewport

http://developer.apple.com/library/safa ... wport.html

- كيف تستخدم إستعلام وسائط CSS3 لإنشاء نسخة الهواتف الذكية في موقعك ( CSS3 ).

http://www.smashingmagazine.com/2010/07 ... r-website/


ملاحظة: المقال ترجم من قبلي. مع بعض الإضافات.

لكم تحياتي..
جملة العربية
http://www.arabjoomla.com

Locked

Return to “القوالب و التصميم”