تخطيط وإنشاء موقع متوافق مع الأجهزة المحمولة لموقعك الرئيسي [مغلق]

Question

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

أثناء البحث في بعض نماذج مواقع الجوال، لاحظنا أن الكثير من المواقع التي تحتوي على WAP في عنوان url هي في الواقع مجرد ملفات HTML مبسطة. http://wap.mlb.com لم يتم تمكين WAP حقًا ولكنه HTML بسيط.

سؤالي هو WAP فكر في الماضي؟نظرًا لأن الهواتف الذكية وأجهزة iPhone لديها القدرة على عرض المواقع، فهل نحتاج إلى القلق بشأن WML وWAP أم أن إصدار HTML المبسط سيكون كافيًا؟

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

أخيرًا، هل ستقوم ببرمجة موقع جوال لمتصفح iPhone/Touch Safari أم ستترك الموقع كما هو؟

Answer 1

تأتي الهواتف الأحدث مزودة بـ WAP2 الذي يستخدم ملف تعريف HTML Mobile (XHTML MP)، والذي يشبه إلى حد كبير لغة HTML العادية.تستخدم الهواتف القديمة لغة الترميز اللاسلكية (WML).

اعتمادًا على جمهورك، سأفكر في إنشاء نسخة متوافقة مع الهاتف المحمول من الموقع باستخدام XHTML MP وإسقاط WML تمامًا.وأعني بالتوافق مع الهاتف المحمول الرسومات الخفيفة والقليل من جافا سكريبت والتنقل البسيط.

للتحقق من قدرات الهواتف اليدوية المختلفة، قم بإلقاء نظرة على وورفل.

أيضا، قد ترغب في إلقاء نظرة على أفضل ممارسات الويب للجوال من W3C.

Answer 2

فيما يلي أمرين يمكنك القيام بهما لتحسين الدعم لأجهزة iPhone دون القيام بالكثير من العمل:

قم بتمرير الصفحة لأعلى لإخفاء شريط URL:

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

وقم بتعيين مقياس لعرض الصفحة (من الأفضل إجراء بعض الاختبارات واللعب بهذا، وابحث أيضًا عن أمثلة أخرى قد تستخدم user-scalable=true):

<meta name="viewport" content="width=320; user-scalable=false" />

Answer 3

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

Answer 4

حتى الآن (2014)

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

واحدة من المزايا الرئيسية هي أنها تستغرق صيانة أقل عند مقارنتها بوجود مواقع ويب منفصلة للجوال وسطح المكتب.

لمعرفة المزيد عنها تويتر بوتستراب انقر هنا

Answer 5

أعتقد أن الاختلاف الرئيسي بين هواتف 2.5G وهواتف 3G الجديدة هو أنه بينما تستخدم هواتف 2.5G متصفحاتها الخاصة، أصبحت المتصفحات الموجودة على هواتف 3G أكثر تشابهًا/دقة في قدرات العرض الخاصة بها.

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

لذا فإن السؤال النهائي سيكون سؤال السوق المستهدف.هل تستهدف جمهورًا يتمتع بالذكاء التكنولوجي والذي يميل إلى امتلاك هواتف تدعم تقنية 3G بالكامل؟هل تستهدف الأشخاص الذين قد يكون لديهم 2.5G على الأكثر؟

Answer 6

تجربتي هي أن الأمر يعتمد حقًا على ما تحاول القيام به ومن/أين يتواجد المستخدمون.

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

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

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

إذا كنت تستخدم تطوير WAP، فاطلع على WinWAP - وهو متصفح WAP يعمل بنظام Windows.

Answer 7

إذا كنت تريد إنفاق مبلغ بسيط جدًا من المال، يمكنك العثور على نسخة مستعملة من كتابي "دليل مطور تطبيقات الويب Palm OS" على أمازون بأقل من دولار واحد.على الرغم من أن النصائح المحددة حول أجهزة Palm VII القديمة لم تعد تنطبق بعد الآن، إلا أن هناك بعض الأقسام المتعلقة بإنشاء مواقع ويب للجوال والتي قد لا تزال سارية.نصيحتي الأساسية هي:جعل الصفحات صغيرة تحتوي على المعلومات ذات الصلة أولاً، ثم روابط التنقل؛دفع المحتوى العام/النموذجي إلى صفحات أخرى؛محاولة التحسين لتقليل مقدار الوقت الذي يقضيه المستخدم في صفحة واحدة؛وتجنب تنزيل الكثير من الكائنات (الصور وملفات JavaScript) للصفحة لتقليل زمن الاستجابة.

Answer 8

الرمز:يتسبب في قيام أداة التحقق من الصحة w3 بإرجاع 11 خطأ عند استخدامها.إليك صفحة الفهرس التي تمت تجربتها فيها:لن يتم استخدام بعض الخطوط المتعددة.إنها خطوط القالب.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>