أمامي تطوير نصائح للعيش من قبل.
وفيما يلي مقال قرأته على بلوق حول الواجهة الأمامية للمطورين وممارسات الترميز واعتقد انني سوف ينقلونه. ومن جانب Neiner دوغ، وهو محرر في الترميز لديك وقود و هو رئيس بكسل استوديو التصميم الغرافيكي . يدمن على التكنولوجيا الجديدة، وعلى وجه التحديد يحب قضاء بعض الوقت مع وورد، روبي على القضبان ومسج.
ما يلي هنا هو عبارة عن سلسلة من 10 أمور لنتذكر والممارسة على كل مشروع على شبكة الإنترنت التنمية. لقد سردت لهم هنا في الترتيب من حيث الأهمية كما العديد من الخطوات بناء على بعضها البعض. إذا كنت تأخذ أي شيء آخر بعيدا عن القراءة، يرجى اتخاذ القواعد رقم 1 ورقم 2 إلى القلب وممارستها. وأعتقد أن حل هاتين المشكلتين سوف يؤدي إلى تحسين تصميم وتنفيذ أفضل في المواقع عبر شبكة الإنترنت.
1. تهمة كافية، وبعد ذلك بعض
خصوصا في الظروف الاقتصادية العصيبة، وقطاع الأعمال والأفراد على حد سواء يسعون لخفض التكاليف والحفاظ على المشاريع لتصل إلى الحد الأدنى. نتيجة لهذه المعرفة، ونحن كما مطوري الويب محاولة نقل من خلال كل مرحلة في أسرع وقت ممكن. جبهة تنمية النهاية، ومع ذلك، يأخذ قدرا كبيرا من الوقت في حال القيام به بشكل صحيح. لا شحن بشكل كاف لذلك الوقت كما يقودنا للمطورين لتخطي الأمور ونحن نعلم هي مهمة فقط للحفاظ على المشروع في حدود الميزانية. حكم بسيط ... كنت عادة لن تأخذ من الوقت لتفعل ذلك الحق إذا لم يكن لديهم الوقت لاتخاذ. الطريقة الوحيدة للحصول على مزيد من "الوقت" كمطور، هو ضمان الوقت ونحن لا تنفق يتم تعويض بشكل صحيح. ويمكن في هذه النقطة وحدها قلوبنا وعقولنا أن تسد تماما في مشاريعنا (...) وبعد ذلك فقط يمكننا أن تأخذ الوقت الكافي لمتابعة ما تبقى من 9 القواعد.
2. تثقيف مصمم
بالنسبة لأولئك الذين مصمم / مطور الكل في وآلة واحدة، وهذا ينبغي للمرء أن يكون سهلا. ومع ذلك، المبرمجون الذين يعملون مع أو لمصمم تتحمل مسؤولية فريدة من نوعها. كما العديد من المصممين يأتي من خلفية الطباعة، والأمر متروك لكم، المطور، لتثقيفهم حول الاحتمالات المتاحة لتصاميمهم. لا ... أنا لا أقول يعرفوا عن الإضافات 150 + مسج كنت تستخدم، أو أفكارك حول استخدام السرد UL / LI مقابل سلسلة من A به. قلت تثقيفهم على الاحتمالات. مساعدتهم على فهم كيفية تصميمها قد عرض على أجهزة مختلفة. مساعدتهم على فهم كيفية الاستفادة تكرار الخلفيات والأنماط القرميد لتحقيق تصاميم رائعة مع حجم ملف الحد الأدنى.
لا تترك الإبداع فقط إلى مصمم سواء! هذه هي فرصتك لتثبت بأنك الإبداعية وكذلك من خلال إيجاد حلول تقنية مثالية لتلبية احتياجات المصمم. نقول لهم "انها مجرد لا يتم بهذه الطريقة" لكل طلب هو وسيلة متأكد النار تسبب الاحباط في كلا الجانبين. وضع عقلك لإيجاد طرق عمل حول العقبات.
ملاحظة: القواعد من 3 إلى 10 من بناء هذه القواعد الأولى والثانية. بعض القواعد التالية تتطلب رسومات إضافية من المصمم، وجميع القواعد وقتا لمتابعة. تقديم التزام لقواعد 1 و 2، والقواعد المتبقية سوف يكون له معنى على حد سواء، وجعل المنتج النهائي أن أفضل بكثير.
3. اعتقد في الطبقات، وليس في شرائح
حتى اليوم، ما زلنا نستخدم عبارة "تقطيع تصميم" لوصف عملية نقل التصميم من Illustrator أو Photoshop في تخطيط HTML / CSS النهائي. في حين لا يزال هذا دقيق إلى حد كبير، اسمه يناقض المفهوم السابق للتشريح في تصميم القطع واعادة تشكيل عليه (عادة في جدول) مرة أخرى على صفحة HTML.
هو أن الشبكة القديمة. والجديد على شبكة الإنترنت يستخدم مفهوم الطبقات، التراص، و z-فهرس لتحقيق التصاميم مع العمق. كما المبرمج، تأكد من الحصول على ملفات PSD الطبقات أو الطبقات ملفات منظمة العفو الدولية من المصمم مقابل تصميم شقة. وهذا سوف يسمح لك الحصول على مرونة أكبر في الطريقة التي وضعت معا موقع على شبكة الإنترنت. تذكر، عندما كان يعمل في طبقات، والنظر في عناصر HTML التي هي ضرورية لبنية قبل اللجوء إلى إضافة divs إضافية وتمتد. يمكنك استخدام نمط متكرر العمودي في html العنصر، وعلى خلفية تكرار أفقي على body عنصر دون توجيه اللعين div#wrapper في حل مشاكل الخلفية الخاصة بك.
4. استخدام تنسيق أفضل صورة
ما هو "تنسيق أفضل صورة" أنت تسأل؟ انها واحدة الذي هو الانسب لهذه المهمة في متناول اليد. PNG، GIF، JPEG وملفات لديها كل المزايا المختلفة. عندما لا يكون هناك شفافية في صورة ما، اختبار أي ملف حجم / جودة الصورة الأفضل بين بابوا نيو غينيا، GIF و JPEG. للصور الكبيرة، وسوف JPEG دائما تقريبا عن حجم الفوز مقابل الجودة. عن الصور الصغيرة من دون شفافية، انظر الذي لديه أفضل حجم ملف PNG أو GIF. إذا قررت على GIF، ومن المؤكد أن تلعب مع الخيارات ارتجف والخيارات الضياع (هل تعلم حتى فوتوشوب لديها "ضياع" خيار GIF؟). كثيرا ما يمكنك ضغط الملفات أصغر من فوتوشوب من خلال ضبط إعدادات إخراج أبعد من ذلك.
عن الصور التي تحتاج إلى الشفافية، واتخاذ قرارات مدروسة بشأن الكيفية التي سيتم استخدامها. إذا كان سيتم الطبقات هم أكثر من الخلفية المعقدة، قد تحتاج إلى النظر في استخدام ملف PNG. إذا كانت الخلفية غير متسقة بما فيه الكفاية أن ماتي لون GIF لن تبرز على نحو رديء، معرفة ما إذا كان ملف GIF أصغر. GIF لديه ميزة لا تحتاج إلى برامج إضافية لجعله يعمل في IE6.
بشأن استخدام JPEG: إذا كنت تستخدم JPEG كجزء من واجهة المستخدم (وليس فقط لعرض الصورة، الخ) مما لا شك فيه أن يترك قبالة ملامح المحكمة الجنائية الدولية عندما الادخار للويب. وبعض المتصفحات تكريم الشخصية وتنتج فرقا بين لون GIF / بابوا نيو غينيا وملفات JPEG من نفس اللون. هذه مشكلة بسيطة لتجنب طريق تحويل قبالة ملامح المحكمة الجنائية الدولية.
ما إذا كان الوضع يخسر فيها؟ كانت هناك أوقات حيث كنت في حاجة إلى الشفافية الكاملة من بابوا نيو غينيا مع تعقيد الصورة أكثر ملاءمة لJPEG. في هذه الحالات غالبا ما أنا كومة (تذكر، والتفكير في طبقات) صورتان: أ PNG على الشفافية، وGIF لجانب صورة معقدة. هو إيجاد الحلول للمشكلات من هذا القبيل من شأنها أن تضمن تحميل صفحات موقعك بسرعة، وأن تصميم يحتفظ بسلامته.
5. تعرف متى استخدام فئات مقابل معرفات
ظننت هذا كان مجرد الحس السليم، ولكن يبدو أنه ليس كما أرى المبرمجون العديد من استخدام أسماء فئة حيث ينبغي استخدام هويات. قد لا يبدو وكأنه مشكلة كبيرة، ولكنها ستستهلك عند محاولة استهداف عنصر باستخدام جافا سكريبت.
مفهوم بسيط، إذا لن يكون هناك سوى عنصر واحد في صفحة معينة، استخدم هوية. إذا لن يكون هناك حالات متعددة على صفحة معينة، واستخدام أسماء فئة. في أي وقت هو عنصر واحد من من نوعها، واستخدام بطاقة هوية. لها بهذه البساطة! أشياء مثل ul.navigation لشريط التنقل الرئيسي أو div.site-logo لا معنى له. كل من هذه العناصر هي متميزة ويجب أن يكون والهوية.
بدلا من إضافة قاعدة أخرى على قائمة لدينا، واسمحوا لي شيء آخر في كتلة هنا: لا تستخدم فئات كثيرة جدا! أخذ التعليمات البرمجية التالية للحصول على مثال المدقع (لاحظ أن تظهر الطبقات ست مرات):
بالنسبة لأولئك الذين رمز كثيرا، وكنت أدرك هذا هو مثال مثير للسخرية، ولكنه يدل على مغالطة من الإفراط في استخدام الفئات. استخدم فقط ما تحتاج إلى نمط بشكل صحيح وتعزيز (عن طريق جافا سكريبت) في HTML، ولا شيء أكثر.
6. جعل صفحاتك مجيب
الهام أن الصفحة يستجيب بشكل صحيح كما يتنقل المستخدم النهائي من خلال ذلك. باستخدام الاتفاقيات مثل آثار الصورة المتغيرة، وكذلك: تحوم،: نشط و: لا يمكن الولايات التركيز ينبغي التشديد بما فيه الكفاية. كنت لا تريد الاعتداء على المستخدم مع الكثير من التفاعلات أو أنماط ولكن معظم الناس تستجيب بشكل جيد لردود الفعل البصري. هنا هو واحد من السهل بالنسبة لك: وصلات يجب تغيير حالة عند مرور الماوس فوقها ... الفترة! لا يكفي أن يعرض المستعرض يد القليل مما يدل على الارتباط. لا استطيع ان اقول لكم كم هو محبط للبحث من خلال صفحة مع نص أسود يبحث عن صلات الرمادي الداكن، ونأمل ونصلي أن يظهر من ناحية السماح لي ان اعرف وجدت واحدة!
باستخدام الاتفاقيات مثل المؤشرات "أنت هنا" أداة أو وصفية، نصائح جميع تندرج تحت هذه الفئة. لمزيد من التفاعل وردود الفعل التي تظهر للمستخدم في الوقت الذي تنقل من خلال موقع ما، كان ذلك أفضل.
7. دائما استخدام العفاريت المغلق المبالغ المرحلة لل
إذا كنت لا تعرف ما هي العفاريت المغلق، وتحقق من هذه المادة في تحطيم مجلة أو واحد في هذا وهناك قائمة بصرف النظر عن التفاصيل. بالنسبة لأولئك الذين لا يعرفون ما هي عليه، لماذا لا يتم استخدامها!؟ إذا كنت تقول لي نظرا لضيق الوقت، أريد أن أشير لكم إلى القاعدة # 1 في هذه القائمة. الماضي حجة الوقت، لا أستطيع أن أفكر في الواقع من أي فائدة أكثر أهمية من استخدام العفاريت المغلق للصورة الانقلاب. تحقق من كاتب لمسج موقع. وتبنى تقريبا كل واجهة المستخدم القطع باستخدام ملف بابوا نيو غينيا واحد (الصورة أدناه). الأحمال واجهة في كل مرة، وجميع الدول تحوم / نشط متاحة على الفور. لا تأخير ل: تحوم الصورة لتحميل؛ واحد طلب إلى الملقم، وليس 10 +. هذه وسيلة رائعة في الواجهة الأمامية ترميز Toolkbox أن المطورين في حاجة إلى استخدام أكثر تكرارا.
8. فهم الفرق بين فلاش وجافا سكريبت
وأعتقد أن جافا سكريبت يمكن أن تفعل أشياء مدهشة. أنا أحب أيضا دفع حدود ما يمكن أن تفعله. أنا أحب تقديم الحاجيات والإضافات بقدر الرجل القادم ... ولكن لدعم جافا لا يمكن حل جميع المشاكل في تطوير الويب الديناميكية. بدلا من إنفاق 10 ساعة محاكاة ميزة فلاش التي من شأنها أن تأخذ 1 ساعة إلى جعل في فلاش، وجعل الحق في الاختيار واختيار فلاش. من ناحية أخرى، إذا كنت في حاجة مجرد محور دوار صورة ... لا تجرؤ على فتح فلاش!
9. اختبار موقعك في العديد من برامج التصفح (بما في ذلك IE6)
هذه واحدة يستغرق وقتا، ليس هناك شك في ذلك. أنا وضع على جهاز ماكنتوش، ولها جهاز كمبيوتر (ومتعددة البيئات الكمبيوتر الظاهرية) واسمحوا لي أن الاختبار هو معظم الناس استخدام المتصفحات العادية اليوم. إلا إذا كان لديك جوجل تحليلات التقارير التي تقول ان لا احد يستخدم آي إي أو كل شخص يستخدم فايرفوكس، لا تجعل هذا الافتراض على كيفية الناس سوف تصفح الموقع الخاص بك. أنا لا أقول جعل هذه المواقع تبدو متطابقة، ولكن جعلها تعمل، وظيفة، وتبدو لطيفة (ومماثلة بالتأكيد!) في معظم برامج التصفح.
ملاحظة: وأذكر على وجه التحديد بسبب IE6 أكبر عملاء بلدي هي شركة الذي لا يزال يستخدم IE6. لقد وضعت أسلوب الترميز الذي يتيح لي الفرصة لبناء بسرعة على المتصفحات الحديثة، وتنفيذ فقط ورقة نمط قليلة، وإصلاحات جافا سكريبت لذلك يبدو موقع الحق في IE6. أنا متأكد من أنني فقدت بعض حافة طريق القيام بهذه الطريقة، ولكنه يوفر لي من لحظات محرجة كثيرة.
10. احتفظ دائما في صيانة العقل
كما كنت "تقطيع" تصميم فوتوشوب، أو إعداد CSS الخاص بك، وجافا سكريبت، والحفاظ على صيانة في الاعتبار. قد يكون بعض الإختراق CSS-مجنون بارد كنت تستخدم اليوم يعود إلى تطارد لكم في وقت لاحق. وقد دفن النظام المغلق أينما الرجاء في ملف CSS يبدو سريع في الوقت الراهن (Guilty!)، ولكن سوف تجعل تغيير وتحديث في وقت لاحق الى كابوس.
خطوة مهمة لتذكر يحدث بعد أن كنت قد هيأهم ملف مصمم لأغراض التصدير من فوتوشوب أو المصور: تذكر لحفظ نسخة من الملف قبل التصدير. بهذه الطريقة إذا كنت في حاجة إلى إعادة تصدير في وقت لاحق، إضافة زر آخر، تغيير سطر من النص، وما إلى ذلك، سوف تكون قادرة على التصدير مرة أخرى بسرعة. فوتوشوب عادة يحفظ الخيارات تنسيق صورة، ضبط ضغط، والألوان غير لامع لجعل عملك أسهل.
اختتام
هناك عدد من الأشياء الأخرى التي تعتبر مهمة لالمبرمجون نهاية الجبهة أن نأخذ في الاعتبار، ولكن أعتقد أن هذه هي بعض من أهم. يمكن أن العديد من المحللين ان هذه ليست قواعد، ولكن أطالبكم أن يفكر فيها على هذا النحو. ربما سوف تكون أقل عرضة للكسر لهم في مصلحة من الوقت أو المال على المشروع الخاص بك المقبل.
