كيف يمكنني تصميم موقع للهواتف النقالة

Question

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

Answer 1

لا يتعين عليك تصميم موقعين مختلفين، ولكن ربما ترغب في القيام بذلك إذا كان من المهم السماح لمستخدمي الهاتف المحمول بالوصول إلى موقعك.

هناك عدة طرق للتعامل مع هذه المشكلة، ولكل منها إيجابيات وسلبيات.أفترض أن موقعك لديه معلوماته في قاعدة بيانات، وينشر تلك البيانات باستخدام مجموعة من القوالب؟(مثل موقع Ruby on Rails أو Django؛موقع PHP.مدونة؛وما إلى ذلك) إذا قمت بترميز مجموعة من صفحات HTML الثابتة يدويًا، فسيكون ذلك يتطلب جهدًا أكبر بكثير بالنسبة لك.

1:نفس HTML، وأوراق أنماط مختلفة لـ SCREEN وMOBILE

الفكرة:يمكنك تقديم نفس بنية HTML لجميع الطلبات.يمكنك إنشاء ورقة أنماط لـ SCREEN وأخرى للجوال.

جيد:بالنسبة لك أيها المبرمج.من الأسهل بالنسبة لك الاحتفاظ بصفحتي أنماط بدلاً من الاحتفاظ بموقعين منفصلين تمامًا للقوالب.

سيء:للمستخدمين الخاص بك.عادةً ما يكون الموقع الذي يسهل استخدامه على جهاز محمول غير فعال بالنسبة للمتصفح العادي؛وغالبًا ما تفشل المواقع المُحسّنة لأجهزة الكمبيوتر المكتبية/الكمبيوتر المحمول فشلًا ذريعًا على الأجهزة المحمولة.من الواضح أن ذلك يعتمد على كيفية ترميز صفحاتك، ولكن في معظم الحالات، سيكون دفع موقعك العادي إلى متصفح الهاتف المحمول أمرًا سيئًا للمستخدمين.(يرى http://www.useit.com/alertbox/mobile-usability.html للحصول على ملخص لأبحاث سهولة الاستخدام التي أجراها جاكوب نيلسن مؤخرًا على مواقع الجوال.)

2:الحفاظ على مواقع منفصلة

(يحتفظ Gmail بأكثر من نظامين!لديهم بشكل أساسي تطبيقات/قوالب حاوية مختلفة تعالج نفس البيانات:النسخة الكاملة لمتصفح AJAX؛إصدار متصفح HTML العادي؛نسخة محمولة أساسية؛تطبيق بلاك بيري أصلي؛وتطبيق iPhone أصلي.)

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

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

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

الإجراء الأساسي:

1. تصميم وبناء واجهات المستخدم للجوال والشاشة.
2. قم بتشغيل المواقع على عنواني URL مختلفين؛الاتفاقية الناشئة هي www.yoursite.com لإصدار سطح المكتب، وm.yoursite.com لإصدار الهاتف المحمول.(يسمح هذا للمستخدمين بالتصفح مباشرة إلى m.yoursite.com إذا كانوا على علم بالاتفاقية.)
3. على www.yoursite.com، تعرف على وكيل المستخدم واختبره لمعرفة ما إذا كان متصفح المستخدم يستخدم الأجهزة المحمولة.إذا كان الأمر كذلك، قم بتوجيه المستخدم إلى m.yoursite.com.
   1. توجد برامج شم مكتوبة بلغات خادم مختلفة (PHP، وPerl، وأي شيء آخر) يمكنك استخدامها على الأرجح.التحقق من التراخيص. فيما يلي مثال على أداة الشم المكتوبة بلغة php.
   2. من مقالة ويكيبيديا عن استنشاق وكيل المستخدم:"مواقع الويب التي تستهدف الهواتف المحمولة بشكل خاص، مثل I-Mode من NTT DoCoMo أو Vodafone Live من Vodafone!غالبًا ما تعتمد البوابات بشكل كبير على استنشاق وكيل المستخدم، نظرًا لأن متصفحات الهاتف المحمول غالبًا ما تختلف بشكل كبير عن بعضها البعض.لقد حدثت العديد من التطورات في مجال التصفح عبر الهاتف المحمول في السنوات القليلة الماضية، في حين أن العديد من الهواتف القديمة التي لا تمتلك هذه التقنيات الجديدة لا تزال تستخدم بكثافة.ولذلك، غالبًا ما تقوم بوابات الويب المحمولة بإنشاء رمز ترميزي مختلف تمامًا اعتمادًا على الهاتف المحمول المستخدم لتصفحها.يمكن أن تكون هذه الاختلافات صغيرة (على سبيل المثال.تغيير حجم بعض الصور لتناسب الشاشات الأصغر حجمًا)، أو بشكل واسع جدًا (على سبيل المثال.عرض الصفحة بتنسيق WML بدلاً من XHTML)."
4. على m.yoursite.com، قم بتوفير رابط إلى www.yoursite.com.لا ينبغي إعادة توجيه المستخدمين الذين ينقرون على هذا الرابط مرة أخرى إلى موقع الهاتف المحمول، وتعتمد كيفية تحقيق ذلك على التنفيذ الذي تقوم به.

قد ترغب في المتابعة وضع المراوغات لمقالاته الناشئة حول اختبار الهاتف المحمول.

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

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

في كود القالب الخاص بك، يمكنك قول أشياء مثل

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

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

Answer 2

تدعم غالبية الأجهزة المحمولة هذه الأيام "أوراق أنماط الهاتف المحمول" وهي ببساطة أوراق أنماط بديلة لعرض الأشياء بشكل أسهل.يمكنك إضافة ورقة أنماط للجوال إلى موقعك بالطريقة العادية وتضمينها media="handheld" يصف:

<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />

ثم سيتم تطبيق هذه الأنماط على الهواتف المحمولة.

المشكلة الوحيدة في هذه الطريقة هي أنه إذا كان HTML الخاص بك ضخمًا، فقد يستغرق تحميل الصفحة بعض الوقت نظرًا لأن معظم متصفحات الهاتف المحمول أبطأ (باستثناء Opera Mini).ولهذا السبب تستخدم المواقع الأكبر مثل flickr وdigg مواقع منفصلة.

ملاحظات إضافية:

• لا يؤثر HTML الضخم على Opera Mini بنفس القدر لأنه يستخدم وكيلاً يقوم بالعرض خارجيًا ثم يرسل "صورة" خاصة إلى الجهاز.
• استخدم HTML بسيطًا ونظيفًا، ثم يمكنك إرساله إلى المتصفحات العادية والأجهزة المحمولة
• سيتعين عليك التحقق من مجموعات أوراق الأنماط باستخدام media صفات.إن إضافة الكود أعلاه إلى IIRC سيجعل المتصفحات تتجاهل ورقة الأنماط الأولى.اذا اضفت media="all" بالنسبة إلى الأول، سيتم استخدام كليهما (وبالتالي يمكنك تجاوز الأنماط الأصلية بدلاً من البدء من جديد).

Answer 3

لفحص كيف يبدو شكل weppage في استخدام متصفح المحمول أوبرا ميني المحاكي

Answer 4

وتحقق من WURFL المشروع. عن نيتها هي مساعدة المطورين تستهدف متصفحات هواتف متعددة، وبدأ طريق العودة قبل ذلك كان هناك موبايل سفاري، والعودة في أيام HDML، WAP و XHTML-MP. انها ما يصل إلى تاريخ ولكن تخزين قدرات الأجهزة الحديثة مثل اي فون. لديها بيانات عن أكثر من 400 من الأجهزة، ولها مكتبات في جاوة، PHP، بيرل، روبي، بيثون، .NET، C ++. اعتمادا على مدى اتساع التي تريد استهدافها التطبيق المحمول هو شيء للنظر في. هنا قائمة المواقع التي تستخدم WURFL.

ومشروع آخر ذي صلة كتبه لوكا باساني (المؤسس المشارك ومعيل لWURFL) هو الجلاد . يمكنك استخدام هذا لإعادة توجيه تلقائيا إلى النسخة المحمولة من موقع الويب الخاص بك.

Answer 5

اجعل الأمر بسيطًا، فكر أوبرا ميني وسوف تحصل على حق.(يحتوي iPhone على المزيد من المتصفح العادي ...)

1. التركيز على المحتوى

2. تجنب المكونات الإضافية

3. اتبع معايير الويب

4. افصل المحتوى عن التخطيط/التصميم، واستخدم CSS قدر الإمكان.

5. استخدم النص والصور.

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

لمزيد من المعلومات لا تتردد في زيارة أي حملة متصفح

---

يحرر:في حالة عدم وضوح أنك تعمل باستخدام ملفات CSS مختلفة لأنواع مختلفة من المتصفحات، ولكنك تستخدم دائمًا نفس المحتوى.قم بزيارة حديقة زن CSS للحصول على عرض توضيحي لطيف.

---

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

• http://www.w3.org/TR/CSS21/media.html

Answer 6

<اقتباس فقرة>   

لديك لتصميم اثنين بمختلف المواقع للقيام بذلك؟

نعم

<اقتباس فقرة>   

وكيف يمكنني معرفة ما إذا كان يتم الوصول إلى الموقع من خلال متصفح المحمول؟

ولغة البرمجة الخاصة بك لديه ربما بعض الطريقة في النظر من خلال المعلومات الخاصة بالعميل. PHP، على سبيل المثال، لديها $_SERVER متغير superglobal التي لديها كل أنواع المعلومات من كل من الملقم خدمة، والعميل زيارة. في هذه الحالة، هل تكون مهتمة في قيمة $_SERVER['HTTP_USER_AGENT']، الذي من شأنه أن يعطي النتيجة التالية، يجب أن أقوم بزيارة الصفحة:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

وهذا يخبرك أنني بنظام التشغيل Mac OS X 10.5.6، وذلك باستخدام سفاري 4.0. هناك كلمات رئيسية معروفة لمختلف متصفحات الجوال. إصدار واحد من متصفح اي فون، على سبيل المثال، لديها وكيل المستخدم التالي:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

و"آي فون" يعطي بالفعل بعيدا، ولكن تأكيد مزيد من الكلمات الرئيسية "موبايل" و "سفاري"

Answer 7

ومعظم المواقع لديها مجال مختلف قليلا الفرعية لمواقع النقالة (معظم استخدام "م"). مثلا فليكر يستخدم m.flickr.com

و(هناك توصية لاستخدام موبي TLD ولكني أبدا رأيت أن تستخدم)

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

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

إذا الاختلافات بين تصميم مشاهد اثنين من ليست لعظيم قد تكون قادرة على الحصول على وسيلة فقط مع خدمة ملفات CSS منفصلة؟

Answer 8

يجب limiited موقعك الى الهاتف المحمول التي يمكن أن تدعم على متطلبات القصوى. لا يمكنك حتى ترفيه عن جميع الهاتف المحمول .

يجب أن يكون

وموقع الويب الخاص بك مجموعة مختلفة من نمط المغلق، وHTTP AGENT يجب التحقق من نوع العميل وفقا لاختيار طلب المغلق ينبغي أن تأخذ مكان.