Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

بناء بدء التشغيل الخاصة بك : تحسين شبكة الإنترنت النقالة

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: The Dashboard Foundation
Building Your Startup: Issue Tracking and Feature Planning

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

Final product image
What You'll Be Creating

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

تطبيقات الجوال مقابل ويب المستجيب 

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

ومع ذلك، أنه من بالغ الأهمية لصنع مخطط اجتماع تجربة ويب رائعة على الأجهزة النقالة.

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

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

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

وبصراحة، جعلني أشعر بأن تطبيق المحمول المخصص فقط ليس ضروري في الوقت الراهن. يمكننا أن نبني جمهورنا مع تجربة ويب المحمول الآن، لا سيما من خلال المراحل المقبلة الحاسمة في ألفا وبيتا.

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

وللتذكير، كافة التعليمات البرمجية ل"مخطط الاجتماع" مكتوب في إطار Yii2 ل بي اتش بي. إذا كنت ترغب في معرفة المزيد عن Yii2، راجع لدينا سلسلة موازية للبرمجة مع Yii2.

حالة الجوال الحالية

للبدء،قمت باستعراض الحالة الراهنة لخدمة "مخطط الاجتماع" مع هاتفي الاي او اس، وأخذت لقطات للتطبيق الأولي. ليست فظيعة، إلا أنها ليست عظيمة. دعونا نستعرض ما تم العثور عليه.

الصفحة الرئيسية

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

Meeting Planner Responsive Web - Home Page

صفحة التسجيل

مرة أخرى، خلافا للتخطيط للعنوان الجمالي وتناسق الهامش الأيسر، صفحة التسجيل أساسا وظيفية:

Meeting Planner Responsive Web - Signup Page

تخطيط الاجتماعات

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

Meeting Planner Responsive Web - Meetings List

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

Meeting Planner Responsive Web - New Meeting Subject Form

إضافة مشاركين أيضا يصبح غير وظيفي قليلاً مع ملحقات bootstrap التي نحن نستخدم:

Meeting Planner Responsive Web - Add a Person Form

وآراء التخطيط للأماكن والأوقات بدئت تنهار. مرة أخرى،تصميم سطح المكتب يقدم الكثير من التفاصيل والكثير من الخيارات للجوال:

Meeting Planner Responsive Web - When Times Form with Switches

مناطق أخرى

صفحة أماكن وظيفيا تعمل ولكن تحتاج تخطيط محسن من الأزرار. وربما لا حاجة لهذا وظيفيا لمستخدمي الهاتف المحمول.

Meeting Planner Responsive Web - Add Places Form

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

Meeting Planner Responsive Web - Profile Settings

تطوير حلول

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

نهوج مختلفة

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

المزح ساعد بكسر الجليد العقلي في رأسي. وأنا دائماً متاح ومرئي لارباب محرري Envato .

وهناك عدد من المجالات التي بدأت النظر فيها:

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

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

على سبيل المثال، كان فهرس الاجتماع مع أربعة أعمدة للجدول التي كان واجب المرور منهم وكانت مشوشة على هواتف الصورة  .

ظللت اسأل نفسي كيف صممت كافة الصفحات للعمل من خلال هاتف.

الاحماء لاستفسارات وسائط الإعلام

القوائم المنسدلة

استغرق الأمر مني بعض الجهد للتغلب على ترددي في الغوص في أعماق . للاحماء، بدأت العمل على تقليل القوائم المنسدلة وتبسيط نطاق وظائف المحمول.

الآن، قررت إنشاء استعلام واحد أساسي عن الاعلام للأجهزة الصغيرة واستخدم ذلك عبر الموقع. وإليك frontend/site.css:

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

هنا هي خاصية menuHide  مضافة إلى/frontend/views/layouts/main.php:

فجأة، القائمة المنسدلة كان لها أقل تعقيد:

Meeting Planner Responsive Web - Responsive Dropdown Menu

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

فتات الخبز

ويشمل التخطيط الافتراضي ايقونة قطعة خبز محملة عن طريق الملحن وأكثر صعوبة للتخصيص. أنا جربت مع إضافة CSS لإخفاء العنصر الأول واول مقسم "/":

Meeting Planner Responsive Web - Desktop Breadcrumbs

استغرق بعض الوقت ولكن اخذ بي غوصا للعمق داخل CSS، محتوى طفل nth مثلاً، وبنيت ثقتي:

لم يكن لدى اي فكرة أن CSS يمكنها تعديل المحتوى.

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

Meeting Planner Responsive Web - Responsive Breadcrumbs

زر مطور يباعد لاطراف الأصابع

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

Meeting Planner Responsive Web - Default Button Spacing Desktop

هذا هو CSS الذي استخدمت، وبدأت بإلاضافة إلى مختلف الأزرار والرموز القابلة للنقر حول الموقع:

هكذا يبدو الشكل على الهاتف النقال – لاحظ الحشو الجديد بين الإرسال وإلغاء الأمر:

Meeting Planner Responsive Web - Enhanced Button Spacing

التفاف النص المستجيب

Meeting Planner Responsive Web - Home Page with Text Wrap

صنع عنوان الصفحة الرئيسية ، الجدولة صنعت التفاف سهل فعليا معروف انه يأخذ وقتاً أطول قليلاً. وفي النهاية، أضفت علامة للنص<br> وقد أخفيته بشكل افتراضي عندما لم يكن على الهاتف المحمول. ولكن كان أيضا يجب علي اضافة مسافة في علامة تمتد مع فئة itemHide.

هنا هو الCSS   ل .rwd-break. كان مخفياً بشكل افتراضي ويظهر فقط في عروض مستجيبة، بكسر نص الرأس بالطريقة المطلوبة.

دون فراغ العلامة الممتد, النص سيفسد دون توسيط سليم.

تبسيط صفحة قائمة الاجتماعات

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

جمعت هذا الموضوع والأعمدة المشاركة في عمود رأسي واحد، والنتيجة تبدو أفضل بكثير.

Meeting Planner Responsive Web - Responsive Meeting List

في/frontend/views/meeting/index.php، أضفت.tabHide لاثنين من  علامات تبويب الأربعة:

وفي/frontend/views/meeting/_grid.php، أنا هيكلت العمود للجمع بين هذا الموضوع والمشاركين:

بتخبئة عمود الفعل يتطلب قليلاً من البحوث، ولكن تبدو مثل هذا:

وفي نهاية المطاف،  هذه التغييرات قامت بتبسيط واجهة سطح المكتب في عملية تحسين الهاتف المتنقل.

التحدي الكبير:جدولة الاجتماعات

Meeting Planner Responsive Web - Existing When Times Planning Form

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

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

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

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

يمكنك أن ترى صفحة خطة الاجتماع الفارغة والمحسّنة هنا:

Meeting Planner Responsive Web - Responsive New Plan a Meeting Form

كل عرض جزئي تطلب أعمدة css إضافية لتخطيطات شبكة Bootstrap المعرفة مسبقاً للعمل بشكل جيد، مثل col-xs4 لليساروcol-xs-8 لليمين . هنا مثال على ذلك:

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

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

هنا كيف تبدو على سطح المكتب — لاحظ تخطيط المناظر الطبيعية لصفوف النص ورموز التبديل:

Meeting Planner Responsive Web - Desktop Layout of Times and Places Form

وهنا نسخة المحمول، كصورة أكثر ومكدسة دون استعلامات الإعلام:

Meeting Planner Responsive Web - Final Responsive Meeting Planning Form

على سبيل لمثال، هنا هو ال CSS  للطريقة التي رمزت أعمدة الجدول على لوحة المواعيد(مرات):

وهنا هو رمز لهذا النموذج الجزئي من/frontend/views/meeting-time/_list.php:

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

ما هي الخطوة التالية؟

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

وستبدأ جهودي في التصميم المستقبلي، "ما ينبغي أن يبدوهذا عليه على المحمول؟"

وكما ذكرت، أعمل حاليا محموم لإعداد "مخطط الاجتماع" للإطلاق ألفا. وأنا ركزت أساسا على التحسينات الرئيسية والميزات التي سوف تجعل اطلاق ألفا سلس.

وأنا اتعقب كل شيء في اسأنا الآن، التي سأكتب حولها في درس تعليمي آخر؛ لقد كان مفيد بشكل لا يصدق. وهناك أيضا بعض الميزات الجديدة المثيرة للاهتمام ما زالت في طريقها.

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

ومرة أخرى، بينما نحن في انتظار مزيد من الحلقات، جدول الاجتماع الأول الخاص بك (من الهاتف الخاص بك!). أيضا، سأقدّر تبادل الخبرات الخاصة بك أدناه في التعليقات، وأنا دائماً مهتم باقتراحاتك. يمكنك أيضا الوصول لي على تويتر @reifman مباشرة. يمكنك أيضا نشرهم في موقع دعم "مخطط الاجتماع".

لمشاهدة الدروس القادمة في السلسلة "بناء بدء التشغيل الخاص بك مع بي اتش بي".

روابط ذات صلة

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.