Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

التصميم والتعليمات البرمجية في التطبيق فيسبوك المتكاملة: HTML + CSS

by
Length:LongLanguages:
This post is part of a series called Design and Code an Integrated Facebook App.
Design and Code an Integrated Facebook App: Theory
Design and Code an Integrated Facebook App: PHP + jQuery

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

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


مقدمة

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

ما عليك إنشاء

Design and Code an Integrated Facebook App

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


الخطوة 1: عدم إعداد هو إعداد للفشل

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

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


الخطوة 2: هيكل التطبيق

Facebook app folder structure

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

  • css
  • شبيبة
  • الصور
  • index.html

الخطوة 3: علامات HTML

إعداد لدينا تشمل

ينبغي لهذا المشروع لقد استعملت حاولت doctype HTML5، التي أعتقد أن معظمكم الآن. لإعادة تعيين CSS بي أنا لقد المرتبطة بإعادة تعيين CSS ياهو من مكتبة يوي. إذا كنت غير معتاداً إعادة المغلق، في أبسط أشكاله فإنه يمكن وصفها بأنها:

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

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

بعد إعادة تعيين لقد مرتبطة ثم إلى بلدي ملف CSS الذي أنا كنت المسمى 'style.css'. لقد ثم تابعت ذلك بتضمين أحدث مسج وتضمين لبلدي ملف javascript الذي الأول يكون اسمه 'myjava.js' (على الرغم من أننا سوف يكون إنشاء هذا الملف في الجزء التالي من البرنامج التعليمي). هذا الملف سوف تسمح لنا بالقيام بتصفية البحث وتغيير محتوى لدينا علامات تبويب الصفحات

إعداد صفحة

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

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

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


الخطوة 4: المحتوى الرئيسي

Facebook app main content

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

يتم تغليف صفحات التطبيق بلوق لدينا داخل حاوية div, التي قد أعطيت فئة من 'tab_container'. داخل هذا ثم يكون divs الأربعة (واحد لكل صفحة علامة التبويب/). لقد أعطيت كل أربعة من هذه فئة تسمى 'tab_content' مع كل واحد منها بعد الفئة الخاصة به لموقفه داخل الصفحة. علامة التبويب الأولى قد طبقة إضافية من 'tab1'، والثاني 'tab2'، والثالث 'tab3' إلخ. ستستخدم هذه الأسماء فئة فردية لمساعدتنا على تحديد كل علامة تبويب في الجزء التالي من البرنامج التعليمي عندما ننفذ مسج.


الخطوة 5: كل التدوينات

webdesigntuts Facebook app blog posts

الفردية بلوق وظيفة فئة بعنوان "ما بعد" ويقع في div مع فئة 'tab1' سوف تكون علامة التبويب هذه على الصفحة الافتراضية. ثم هذا يحتوي على علامات الارتساء وتمتد عدة مما سيتيح لنا أن تتمكن عناصر النمط مثل صاحب البلاغ تاريخ ومدونة باللون الأزرق الأصلي على غرار facebook. بعد الانتهاء من هذا شعبة 'آخر' نحن مجرد نسخ ولصقه لبقية الوظائف. لا تسرف وتسد في التعليمات البرمجية الخاصة بك، والحفاظ عليها حوالي ثلاث أو أربع كهذا سوف تعطينا فكرة عن كيف سيكون الشكل والمظهر. لقد أيضا خلق فترة زمنية مع الفئة 'الخط' الذي هو ببساطة خط أفقي سوف نستخدم في جميع أنحاء التطبيق.


الخطوة 6: علامات التبويب الأخرى

webdesigntuts Facebook app tabbed pages

لدينا "علامات تبويب الصفحات" الأخرى تتكون أساسا من علامات h3 والربط والفقرة:


الخطوة 7: عامل تصفية البحث

webdesigntuts Facebook app filter search

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


خطوة 8: مثل ألفيس بوك والزر

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


الخطوة 9: علامة التبويب رؤوس

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


الخطوة 10: المغلق

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


الخطوة 11: الإعداد

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


الخطوة 12: بناء كتل

اللبنات الأساسية للمحتوى الرئيسية كما يلي:


الخطوة 13: الطباعة

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


الخطوة 14: علامات التبويب


الخطوة 15: أزرار

webdesigntuts Facebook app buttons

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


الخطوة 16: المكونات الإضافية


الاستنتاج...

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

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


مزيد من الروابط & الموارد

  • تصميم ورمز التطبيق فيسبوك المتكاملة-نظرية
  • إعادة تعيين CSS إريك ماير
  • Facebook الاجتماعية الإضافات
  • لدينا التطبيق ويبديسيجنتوتس + على ألفيس بوك
  • 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.