أحدث الأخبار

لدينا أفكار حول تصميم البرمجيات والتنمية

9 أخطاء لا يمكن أن تجعل أثناء عملية تطوير تطبيقات الويب

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

مصدر: www.softwarehut.com

دعونا نقول، أن لديك لتطوير التطبيق. مهمتك الرئيسية هي توفير الدعم لجميع أنظمة التشغيل (الروبوت، دائرة الرقابة الداخلية ويندوز فون). ما الأخطاء التي يجب تجنبها؟ ما هي التحديات في انتظاركم؟ كيفية التعامل معها؟ انت محظوظ. أنت حقا. وسوف تظهر لك تسعة الأخطاء الأكثر شيوعا وحلولها. وبعضها سيكون أساسيا وآخر آخر أكثر تقدما. هل أنت جاهز؟ هيا بنا نبدأ.

1. تطوير دون بحث

خطأ:

أنت لا تعرف. ما إذا كان من الممكن تضمين ميزة معينة في تطبيق الويب أم لا.

نتيجة:

العديد من ساعات الضائع، طن من الإحباط، العميل غير سعيدة (أو رئيسه …).

مثال:

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

حل:

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

2. باستخدام بعض HTML5 / CSS3، التي لا تعمل بشكل جيد على الهاتف المحمول أو بعض الأجهزة

خطأ:

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

مثال:

مثال لا يعمل:

.menuLink {
اللون: أبيض;
النص الديكور: لا شيء;
حافة: -10em;
حشوة: 10em;
}
.disabledMenuItem {
غموض: 0.1;
المؤشر: الافتراضي;
}
عرض الخام وبياث استضافت مع ❤ by GitHub

مثال للعمل:

.menuLink {
اللون: أبيض;
النص الديكور: لا شيء;
حافة: -10em;
حشوة: 10em;
عرض: inline-block;
}
.disabledMenuItem {
غموض: 0.1;
المؤشر: الافتراضي;
}
عرض الخام مثال work.css استضافت مع ❤ بواسطة GitHub

حل:

  • تحقق دائما، إذا كان يمكنك استخدام جزء معين من التعليمات البرمجية أم لا.
  • تذكر البادئات عند استخدام كس (أي الرسوم المتحركة بدون -بكت لن تعمل).
  • غير ال عرض الدولة من عرض: مضمنة إلى العرض محجوب أو ديسبلاي: إنلين-بلوك.
  • استخدم بعض الموارد الرائعة، مثل caniuse.com أو html5test.com, للتحقق من ما هو معتمد على أجهزة معينة.
يمكنك أيضا استخدام استعلامات الوسائط، على سبيل المثال:
$queryMaxNotEnough: ‘فقط الشاشة و (ماكس العرض: 1140px) و (مين العرض: 1024px)’;
$queryMaxMobile: ‘فقط الشاشة و (ماكس العرض: 1023px)’;
@mixin queryMaxMobile {
@media #{$queryMaxMobile}
{
@يحتوى;
}
}
@mixin queryMaxNotEnough {
@media #{$queryMaxNotEnough}
{
@يحتوى;
}
}
@mixin queryRetina {
@وسائل الإعلام (-webkit-min-device-pixel-ratio: 2), (مين قرار: 192dpi) {
@يحتوى;
}
}
view raw Solutions.css استضافت مع ❤ بواسطة GitHub

3. الصور منخفضة الدقة على شاشة أبل الشبكية

خطأ:

باستخدام دقة منخفضة فقط من الصور.

نتيجة:

تبدو الصور غامض على الشبكية و بيكسيلاتيون قد تحدث.

مثال:

حل:

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

4. تحميل الموقع على الهاتف المحمول في أكثر من 3 ثوان

خطأ:

نتوقع، أن الجميع دائما يستخدم اتصال واي فاي، الذي لديه ما يكفي من السرعة (سرعة عالية).

نتيجة:

انخفاض حركة المرور، وانخفاض التحويل، ويشكو المستخدمين (وانهم على حق!).

حل:

  • تحسين الصورة، ضغط التعليمات البرمجية، استعلامات قاعدة البيانات، كدن (شبكات تسليم المحتوى).
  • يمكنك أيضا استخدام أجاكس لتحميل جزء من الموقع أولا أو يمكنك أيضا وضع البرامج النصية في الأسفل من قبل </body> هتمل.

5. المحمول التركيز مكان المتصفح على حقل الإدخال الأول على الموقع، حتى أننا لا نريد ذلك

مثال:

تظهر لوحة المفاتيح تلقائيا، إذا كان هناك حقل الإدخال على الشاشة.

حل:

وضع مدخلات مخفية فوق مدخلاتنا. يمكننا استخدام هذا الجزء من شفرة هتمل:
<إدخال type=text style=position: fixed; bottom: -100000px; disabled readonly/>

6. نسيان البادئات

على سبيل المثال، إذا كنت تريد استخدام انتقال الملكية، يجب أن نتذكر أن استخدام البادئة -webkit- قبل الملكية العادية.

مثال للعمل:

-webkit-transition: all .5s ease;
transition: all .5s ease;

7. ضبط ارتفاع to 100vh

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

مثال:

ios-safari-portrait-before-scroll

حل:

position: absolute;
top: 0;
bottom: 0;
view raw Solution.html استضافت مع❤ by GitHub

8. الاستخدام غير الصحيح لل يقرأ فقط الصفات

لنفترض أنك استخدمت input type="text" readonly وبعد النقر عليه، يظهر شريط التنقل لأعلى. إذا لم نكن نريد إدخال نص في هذا الإدخال، يجب أن نضيف إلى هذه العلامة onfocus="blur()".

9. إنشاء التطبيق على شبكة الإنترنت فقط مع النظام فقط (أي دائرة الرقابة الداخلية) في الاعتبار

والآن، أخيرا وليس آخرا، بعض الشيء يجب عليك القيام به في البداية. يستخدم المستخدمون المستقبليون لتطبيق الويب أنظمة مختلفة. بعض منهم iPhone’s, some of them Android’sوبعضها هواتف ويندوز. يجب أن تخطط تطبيق الويب الخاص بك معهم في الاعتبار. خلاف ذلك، تعديل تطبيق الويب، للعمل بشكل صحيح على جميع الأنظمة، يمكن أن تكون مضيعة للوقت ومكلفة للغاية.

روابط مفيدة:

http://caniuse.com http://html5test.com http://github.com

نحن هنا وسعيدة للمساعدة!

البريد الإلكتروني

وسوف نعود اليكم في أقرب وقت ممكن.

ارسل بريد الكتروني

دردشة مباشرة

التحدث على الانترنت مع شركائنا دعم العملاء رهيبة.

الدردشة الآن

مكالمة

من الاثنين إلى الجمعة من 8:00 حتي 08:00 إست.

+91 9555960648

دعم الفيديو

مشاهدة الفيديو على الانترنت والبدء بسرعة.

شاهد الآن

لدي سؤال؟ فريقنا هنا للمساعدة