30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
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

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

वापसी पर स्वागत है! ट्यूटोरियल के इस भाग में हम HTML में हमारे डिजाइन को कोडित करने जा रहे हैं और कुछ फेसबुक की CSS स्टाइल गुणों को दिखाएंगे, जो इसे नेटिव अनुभव देंगे। तो मेरे साथ रहो, अपने लिए एक कप चाय ले और कोडिंग के साथ खुश रहे!


परिचय

हमारे डिज़ाइन के भाग 2 में आपका स्वागत है और एक नेटिव फेसबुक एप को कोड में आपका स्वागत है। पिछली अनुच्छेद में हमने कुछ विचार प्रक्रियाओं पर पर्दे के पीछे देखा, जो कि एक नेटिव देखो बनाने और फेसबुक ऐप को महसूस करने में शामिल थे। यद्यपि हम Photoshop में इसके बारे में वास्तविक डिज़ाइन के बारे में बहुत कुछ नहीं जानते थे; हमने चर्चा की है कि फेसबुक के डिज़ाइन सिद्धांत आपके ऐप को डिज़ाइन करने में आपकी सहायता कैसे कर सकते हैं। मेरे उदाहरण के लिए मैंने वेब डिज़ाइनटट्स + ब्लॉग को फेसबुक एप के रूप में पुनः बनाने का फैसला किया। मैं यह सोच रहा हूं कि Photoshop में आप सभी को सहज रूप से आराम कर सकते हैं या तो इसे दोहराया है या अपने लिए एक कप चाय ले और कोडिंग के साथ खुश रहे।

हम क्या बनाएंगे

Design and Code an Integrated Facebook App

ट्यूटोरियल के इस भाग में हम HTML में उस डिजाइन को कोडित करने जा रहे हैं और फेसबुक के कुछ CSS स्टाइल गुणों को दिखाते हैं जो इसे नेटिव अनुभव देंगे। तो मेरे साथ रहो, अपने लिए एक कप चाय ले और कोडिंग के साथ खुश रहे!


Step 1: तैयार करने में नाकाम रहने की तैयारी है

आगे की नियोजन की थोड़ी शुरुआत के साथ यह हमेशा एक अच्छा विचार है। आप में से कुछ Photoshop में अपने लेआउट को डिज़ाइन करना चाहते हैं, जबकि आप में से कुछ जो विश्वास कर रहे हैं वे सीधे wireframe से HTML / CSS मार्कअप में कूदना चाहते हैं। व्यक्तिगत रूप से मैं हमेशा Photoshop में कोडिंग करता हूं, क्योंकि मुझे एक मजबूत दृश्य पत्ता है कि मैं क्या कोडिंग करने वाला हूं। जब आप अपने ऐप को अपडेट करना चाहते हैं तो यह भविष्य में भी उपयोगी हो सकता है। Photoshop में चीजों को व्यवस्थित और अवधारणा के लिए बहुत आसान हो सकता है, क्योंकि यह आपके कोड एडीटर में हो सकता है।

कभी-कभी मैं अपनी wireframe को भी प्रिंट करना चाहूंगा और एक पेन के साथ उन पर आयामों को चिह्नित करना चाहूंगा। जब मैं चीजों को कोडित कर रहा हूं तब भी यह जीवन आसान बनाता है। जैसा कि आप साथ जाते हैं मुझे यकीन है कि आप अपने तरीके और चीजों को करने के तरीके के साथ आ सकते हैं और इसका एक हिस्सा आपको सबसे अच्छा तरीका ढूंढ रहा है।


Step 2: ऐप संरचना

Facebook app folder structure

जिस तरह से मेरे पास मेरे फ़ोल्डर की संरचना है, वह इस प्रकार है (और ये हर प्रोजेक्ट के लिए चीजों को स्थापित करने का मेरा मानक तरीका है)। आप अपनी हार्ड ड्राइव पर इस रिक्त फ़ोल्डर के टेम्पलेट को बनाने और हर बार जब आप एक नया प्रोजेक्ट बनाते हैं तो कॉपी बनाकर आप खुद को बहुत समय बचा सकते हैं

  • css
  • js
  • images
  • index.html

Step 3: HTML Markup

हमे शामिल करना

इस परियोजना के लिए मैंने HTML 5 doctype का इस्तेमाल किया है, जो मुझे लगता है कि आप में से ज्यादातर ने अभी तक कोशिश की थी। मेरे CSS रीसेट के लिए मैंने अपने YUI पुस्तकालय से Yahoo के CSS रीसेट से लिंक किया है। यदि आप किसी CSS रीसेट से परिचित नहीं हैं, तो इसके सबसे बुनियादी रूप में इसे इस प्रकार वर्णित किया जा सकता है:

डिफ़ॉल्ट स्टाइल हाइट्स, हाशिए और हेडिंग आदि के फ़ॉन्ट आकार जैसी चीज़ों में ब्राउज़र असंगतता को कम करने के लिए एक स्टाइलशीट

मैं इस ट्यूटोरियल में इसके बारे में बहुत अधिक जानकारी नहीं ले जाऊंगा, लेकिन आप इस बारे में और अधिक जानकारी प्राप्त कर सकते हैं ताकि आप नीचे दिए गए पढ़ने के खंड में जा सकें।

रीसेट के बाद मैंने अपनी CSS फ़ाइल से लिंक कर लिया है जिसे मैंने 'style.css' नाम दिया है। मैंने इसके बाद jQuery के नवीनतम शामिल किए गए हैं और मेरी अपनी javascript फाइल में शामिल है, जिसे मैंने 'myjava.js' नाम दिया है (हालांकि हम इस फाइल को ट्यूटोरियल के अगले हिस्से में बना रहे हैं)। यह फाइल हमें हमारे फ़िल्टर खोज को करने और हमारे पृष्ठ टैब की सामग्री को बदलने की अनुमति देगा।

हमारे पृष्ठ की स्थापना

हमारे फेसबुक ऐप के HTML संस्करण को बनाने के दौरान, मैं सब कुछ एक रेपर में डालूंगा जो 760px चौड़ा है। ह सिर्फ यह सुनिश्चित करने के लिए है कि मैं 760px के भीतर रह रहा हूं; कैनवास की चौड़ाई जो कि फेसबुक आपके ऐप को अंदर बैठने की अनुमति देता है। इससे पहले कि मैं इसे फेसबुक में डालूँ, उसके बाद मैं इसके लिए इस रेपर और CSS को हटाऊं।

हमारे सेटअप में एक बार शामिल होने और 'wrapper' तो यह हमारे ऐप के मुख्य बिल्डिंग ब्लॉकों पर जाने के लिए समय है। इस उदाहरण में यह अपेक्षाकृत सरल है क्योंकि हमारे पास 'maincontent' और 'sidebar' डिविज़ हैं। इसके लिए हम एक ही नाम की classes लागू करेंगे। यदि आप चाहें, तो आप 'classes' के बजाय 'id' का उपयोग कर सकते हैं क्योंकि इन div उदाहरणों को दोहराया नहीं जाएगा। हालांकि, कुछ, जिसे मैं हमेशा के लिए चुनता हूं (हालांकि मुझे यकीन है कि कुछ असहमत होंगे) अधिकांश मदों पर classes का उपयोग करना है। मैं शायद ही कभी आईडी का उपयोग करता हूँ। मुझे लगता है कि ऐसा करने से यह मेरे लिए सरल रहता है। मुझे कभी आश्चर्य नहीं है कि मैंने कुछ 'id' या एक 'class' दिया है। यह असाधारण काम में आ सकता है, खासकर जब आप अपने ऐप में jQuery को शामिल करना शुरू करते हैं। यद्यपि यह विचार करते हैं कि क्या कोडिंग शुरू करने से पहले यह संभव है कि आपको निश्चित रूप से id का कहीं भी उपयोग करने की आवश्यकता नहीं होगी।

मार्कअप के पूरा होने वाले हिस्से का समापन करने के साथ-साथ एक समापन टिप्पणी के साथ हमेशा अपने मार्कअप ब्लॉकों को समाप्त करने की सलाह दी जाती है। इस तरह से आप जानते हैं कि प्रत्येक अनुभाग समाप्त होने पर। मुझे यह स्वीकार करना होगा कि मैं इस तकनीक को अपनाने में काफी देर कर रहा था और मैंने अपने समय को कई घंटे तक बचा सकता था, जिससे मुझे यह पता लगाने की कोशिश हो रही थी कि कहां से कुछ ब्लॉक शुरू होते हैं और अंत है।


चरण 4: मुख्य सामग्री

Facebook app main content

इस ऐप के लिए मुझे नहीं लगता था कि लोगो को घर बनाने के लिए हेडर का उपयोग करना जरूरी था, इसलिए मैंने इसे 'maincontent' div के शीर्ष पर 'logo' नामक class के साथ अपने div में डाल दिया। इसके बाद टैब के लिए एक अनोर्ड सूची के द्वारा पीछा किया जाता है। मैंने टैब्स को एक class का नाम दिया है; हाँ आपने इसे 'tabs' अनुमान लगाया। यह हमारे टैब मेनू बार के रूप में कार्य करेगा जो हमारे ब्लॉग ऐप के विभिन्न पृष्ठों को प्रदर्शित करेगा।

हमारे ब्लॉग ऐप के पृष्ठ एक div container के अंदर लपेटे जाते हैं, जिसमें मैंने 'tab_container' का एक class दिया है। इसके अंदर मेरे पास चार divs (प्रत्येक टैब / पृष्ठ के लिए एक) है। मैंने उन सभी चार classes को 'tab_content' नामक एक CLASS दिया है, जिसमें प्रत्येक व्यक्ति को अपनी स्थिति के लिए पृष्ठ के भीतर अपनी स्थिति है। पहली टैब में 'tab1' का एक अतिरिक्त CLASS है, दूसरा 'tab2', तीसरा 'tab3' आदि। ये अलग-अलग class के नामों का इस्तेमाल हम ट्यूटोरियल के अगले हिस्से में प्रत्येक टैब की पहचान करने में मदद के लिए किया जाएगा, जब हम ।


Step 5: व्यक्तिगत ब्लॉग पोस्ट

webdesigntuts Facebook app blog posts

व्यक्तिगत ब्लॉग पोस्ट में "post" शीर्षक वाला class है और वह class 'tab1' के साथ div में स्थित है क्योंकि यह टैब डिफ़ॉल्ट-लैंडिंग पृष्ठ पर होगा। इसके बाद इसमें कई एंकर और स्पैन टैग शामिल होते हैं जो हमें स्टाइल आइटम जैसे कि नीली a lafacebook में एक तारीख और ब्लॉग लेखक के रूप में सक्षम होने की अनुमति देगा। एक बार जब यह 'past' div पूरा हो गया है, तो हम उसे बाकी पदों के लिए बस कॉपी और पेस्ट कर सकते हैं। ज़्यादा पानी में मत जाओ और अपना कोड छोडो, इसे तीन या चार के आसपास रखो क्योंकि इससे हमें एक विचार मिलेगा कि यह कैसा दिखता है और कैसे महसूस करता है। मैंने class 'line' के साथ एक स्पैन भी बनाया है जो कि बस एक हॉरिजॉन्टल रेखा है जो हम एप के दौरान उपयोग करेंगे।


चरण 6: अन्य पृष्ठ टैब

webdesigntuts Facebook app tabbed pages

हमारे अन्य पेज टैब्स मुख्य रूप से h3, anchor और paragraph टैग के बने होते हैं:


Step 7: खोज फ़िल्टर

webdesigntuts Facebook app filter search

साइडबार के शीर्ष पर हमारे पास हमारी साइट फ़िल्टर खोज है - यह एक साधारण रूप से बना है। हम इस परिचालन को अगले भाग में jQuery के प्रयोग से ट्यूटोरियल बना देंगे। फ़ॉर्म को हमारी 'likes' गिनती को प्रदर्शित करने के लिए एक और हॉरिजॉन्टल रेखा और एक स्पैन और पैराग्राफ टेक्स्ट का पालन किया जाता है।


Step 8: फेसबुक की तरह और बटन

सौभाग्य से हमारे लिए, फेसबुक ने इसे हमारे ऐप में एक जैसे बटन को शामिल करने के लिए सरल बना दिया है। खुद के बटन के लिए कोड या Facebook Developer Plugins पर उनके किसी भी अन्य सामाजिक प्लग-इन के लिए कोड उत्पन्न कर सकते हैं। एक बार कोड तैयार करने के बाद, उसे अपने html में ले जाएं। आप उसे स्थान देने के लिए कुछ CSS जोड़ना चाह सकते हैं, हालांकि इस मामले में यह आवश्यक नहीं है।


Step 9: टैब हेडर

यदि आपने इस ट्यूटोरियल के पहले भाग को पढ़ा है (यदि आप इसे बना चुके हैं तो मैं अनुमान लगा रहा हूं) तो आप ने मुझे पुनर्प्रयोग के बारे में बात करनी होगी। ये टैब हेडर यह निर्धारित करते हैं कि हमारे कोड के किसी अन्य हिस्से से अधिक। फेसबुक के साथ हम इन टैब हेडर का पुन: उपयोग कर सकते हैं और उन्हें आसानी से लागू कर सकते हैं। वे वास्तव में काम में आते हैं, आपको साइट पर त्वरित अतिरिक्त अनुभाग जोड़ना चाहिए।


Step 10: The CSS

अब हमारे HTML के स्टाइलिंग पर जाने का समय आ गया है। फेसबुक की साधारण स्टाइल के कारण बहुत ज्यादा CSS नहीं है। मैंने इसे आपके भागों में विभाजित किया है ताकि आप पर नज़र रख सकें। इस चरण पर यह भी कहना महत्वपूर्ण है कि जब आपके CSS को कैश की जाती है, तो इसका परीक्षण और ट्वीडिंग करने पर फेसबुक को परेशान किया जा सकता है, जिसका अर्थ है कि जब आप अपनी स्टाइल शीट के एक नए संस्करण को अपलोड करते हैं तो यह अभी भी पुरानी एक को प्रस्तुत करता है। हालांकि सही नहीं; मैंने उपयोग किया गया वैकल्पिक सूचकांक फ़ाइल में शामिल स्टाइलशीट के अंत में '' version= 1 '' जोड़ना था। हर बार जब आप CSS को अपडेट करते हैं और अपलोड करते हैं तो आपको भी इंडेक्स फ़ाइल में वर्शन संख्या को अपडेट करना होगा।


Step 11: सेटअप

हम रेपर और कुछ ऐसी classes बनाकर CSS शुरू कर देते हैं जो मैं हमेशा आइटमों को बायीं या सही फ्लोट करने में सक्षम होने के लिए जोड़ता हूं।


Step 12: बिल्डिंग ब्लॉक्स

हमारी मुख्य सामग्री के लिए भवन ब्लॉक निम्नानुसार हैं:


Step 13: टाइपोग्राफी

शायद हमारे फेसबुक एप के सबसे महत्वपूर्ण CSS भागों में से एक यह गलत करें। और यह आपके ऐप के मूल प्रभाव को खराब करेगा। फेसबुक के चारों ओर एक नज़र डालें और अपनी आवश्यकताओं के लिए सबसे उपयुक्त फ़ॉन्ट आकार चुनें।


Step 14: टैब्स


Step 15: बटन

webdesigntuts Facebook app buttons

फेसबुक ऐप के लिए CSS का एक और अभिन्न अंग बटन है। मुझे यकीन है कि आप अपने एप्लिकेशन के आसपास इनमें से कुछ का उपयोग करना चाहेंगे। हमने इन्हें एक बटन का उपयोग नहीं किया है, बल्कि इमेज के लिए इसके अंदर एक स्पैन class के साथ एक एंकर टैग का उपयोग किया है।


Step 16: अतिरिक्त घटक


निष्कर्ष ...

तो हमारे पास यह है, हमारे पास HTML / CSS में कोडित हमारे फेसबुक एप हैं। मुझे आशा है कि आपको ट्यूटोरियल के इस हिस्से को पढ़ने में मजा आया था और अब आपको एक बड़ी समझ है कि फेसबुक की शैलियों को CSS में कैसे अनुवाद किया जा सकता है। फेसबुक की कुछ CSS संपत्तियों को देखकर और उनका इस्तेमाल करके हम वास्तव में समझ सकते हैं कि सही जगहों पर कोड की कुछ पंक्तियां हमारे ऐप को कैसे दे सकती हैं, जो कि नेटिव दिखती हैं और महसूस करती हैं, जो फेसबुक में आराम से बैठेंगे और फेसबुक के डिजाइन सिद्धांतों का पालन करेंगे ।

ट्यूटोरियल के अगले भाग में हम सीखेंगे कि इसे एक नेटिव ब्लॉग ऐप बनने के लिए फेसबुक में कैसे कार्यान्वित करें। हम इसे YQL और फेसबुक ग्राफ़ API का उपयोग कर करेंगे। मैं भी कुछ संकेत और कुछ मीठी jQuery के साथ अपने ऐप को spicing के लिए सुझाव दिखा रहा हूँ अच्छाई। तो अगले भाग तक, हैप्पी कोडिंग!


आगे की कड़ियाँ और संसाधन

  • Design and Code An Integrated Facebook App - Theory
  • Eric Meyer's CSS reset
  • Facebook social plugins
  • Our Webdesigntuts+ app on Facebook
  • 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.