डिजाइन और कोड संपूर्ण फेसबुक ऐप: HTML + CSS

() translation by (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: ऐप संरचना

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

css
js
images
index.html

Step 3: HTML Markup

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design and Code an integrated Facebook App</title>

<link rel="stylesheet" type="text/css" href="https://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/myjava.js" type="text/javascript"></script>


</head>

<body>
</body>
</html>

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

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

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

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

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

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

<body>
<div class="wrapper">

  <div class="maincontent">
    
    	<div class="tab_container">
     	</div><!--End Tab Container -->
    
	 </div><!--End Main Content-->
    
    <div class="sidebar">
    </div><!--End Sidebar-->

</div><!--End Wrapper -->


</body>

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

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

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

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

	<div class="maincontent">
    
    	<div class="logo"><img src="images/logo.png" width="379" height="60" alt="webdesigntuts+ logo"></div>
        
        <ul class="tabs">
            <li><a href="#tab1">All</a></li>
            <li><a href="#tab2">About</a></li>
            <li><a href="#tab3">Write For Us</a></li>
            <li><a href="#tab4">Other Blogs</a></li>
		</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
    
          <div class="post">
        </div><!--End Blog Post-->
        
        <div class="post">
        </div><!--End Blog Post-->
        
    </div><!--End Tab 1-->
   
    <div id="tab2" class="tab_content">
   </div><!--End Tab 2 -->
    
    <div id="tab3" class="tab_content">
	</div><!--End Tab 3 -->
    
     <div id="tab4" class="tab_content">
	</div><!--End Tab 4 -->

</div><!--End Tab Container -->
    
  </div><!--End Main Content-->
    
    <div class="sidebar">
    </div><!--End Sidebar-->
</div><!--End Wrapper -->

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

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

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

<div class="tab_container">
    <div id="tab1" class="tab_content">
    

    
         <div class="post">
                <h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3>
                <span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span>
                <p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p>
                <a class="more" href="#">Read More</a>
                <span class="line"></span>
                <a href="#">12 Likes 14 Comments Share</a>
                <span class="line"></span>
        </div><!--End Blog Post-->
        
    </div><!--End Tab 1-->

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

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

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

    <div id="tab2" class="tab_content">
    
    <h3>About</h3>
    <p>Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. We publish tutorials that not only produce great results and interfaces, but explain the techniques behind them in a friendly, approachable manner.</p>
    <p>Web design is a booming industry with a lot of competition. We hope that reading Webdesigntuts+ will help our readers learn a few tricks, techniques and tips that they might not have seen before and help them maximize their creative potential!</p>
    <p><strong>Webdesigntuts+ is part of the Tuts+ Network</strong></p>
	
    </div><!--End Tab 2 -->

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

webdesigntuts Facebook app filter search

1	<form action="" method="get">
2	<input name="search" class="search" placeholder="Filter webdesigntuts+ posts">
3	</form>

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

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

 <a class="button left" href="http://webdesign.tutsplus.com/" target="_blank"><span class="buttonimage left"></span>Website</a>

            <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=253432341349745&amp;xfbml=1"></script><fb:like href="http://apps.facebook.com/fbtuttts"layout="button_count" width="75" show_faces="true" action="like" font="lucida grande"></fb:like>

            <a class="button right" href="#"><span class="buttonimage left"></span>Logout</a>

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

Step 9: टैब हेडर

1	<div class="tabHeader">Categories</div>
2
3	<ul>
4	<li><a href="#">Sample Cat 1</a></li>
5	<li><a href="#">Sample Cat 2</a></li>
6	<li><a href="#">Sample Cat 3</a></li>
7	<li><a href="#">Sample Cat 4</a></li>
8	<li><a href="#">Sample cat 5</a></li>
9	</ul>
10
11	<div class="tabHeader">A Little Bit About Us</div>

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

Step 10: The CSS

1	Code Block showing tabs headers

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

Step 11: सेटअप

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

1	/-----------------------------------------------------------------------------------/
2	/* Setup
3	/-----------------------------------------------------------------------------------/
4	.wrapper{
5	width: 760px;
6	height:200px;
7	margin-left:auto;
8	margin-right:auto;
9	padding-top:20px;
10
11
12	}
13	.right{
14	float:right; /* A class I always add to float items right */
15	}
16	.left{
17	float:left; /* To float items left*/
18	}

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

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

1	/-----------------------------------------------------------------------------------/
2	/* Setup
3	/-----------------------------------------------------------------------------------/
4	.wrapper{
5	width: 760px;
6	height:200px;
7	margin-left:auto;
8	margin-right:auto;
9	padding-top:20px;
10
11
12	}
13	.right{
14	float:right; /* A class I always add to float items right */
15	}
16	.left{
17	float:left; /* To float items left*/
18	}
19
20	/-----------------------------------------------------------------------------------/
21	/* Building Blocks
22	/-----------------------------------------------------------------------------------/
23
24	/-----------------------------------------------------------------------------------/
25	/* Typography
26	/-----------------------------------------------------------------------------------/
27
28
29	/-----------------------------------------------------------------------------------/
30	/* Tabs
31	/-----------------------------------------------------------------------------------/
32
33	/-----------------------------------------------------------------------------------/
34	/* Buttons
35	/-----------------------------------------------------------------------------------/
36
37	/-----------------------------------------------------------------------------------/
38	/* Extra Components
39	/-----------------------------------------------------------------------------------/

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

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

/*-----------------------------------------------------------------------------------*/
/*	Typography
/*-----------------------------------------------------------------------------------*/

a{
cursor: pointer;
color: #3B5998;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
strong{
font-weight:bold;
}
em{
font-style:italic;
}
h3{
font-size: 16px;
font-weight:bold;
line-height: 1.1em;	
margin-bottom:5px;
}
.postInfo{
display:block; /* Spans are inline element so needs to be changed to block in order for the margin to work */
color:#808080;
margin-top:5px;
margin-bottom:10px;
}
p{
font-size: 12px;
line-height: 1.5em;
margin-bottom:18px;
}
.line{
display:block;
width:100%;
height:1px;
background-color:#ccc;
margin-top:5px;
margin-bottom:5px;
}
.more{
color:#3B5998;
font-weight:bold;

}
.likesCount{
font-size:16px;	
font-weight:bold;
}

Step 14: टैब्स

/*-----------------------------------------------------------------------------------*/
/*	Tabs
/*-----------------------------------------------------------------------------------*/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 19px; /*--Set height of tabs--*/
	border-bottom: 1px solid #E2E2E2;
	border-left: 1px solid #E2E2E2;
	width: 100%;
	margin-bottom:20px;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 18px; /*--Minus 1px from the height of  ul--*/
	line-height: 18px; /*--aligns text within the tab--*/
	border: 1px solid #E2E2E2;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #f2f2f2;
	margin-right:5px;
	min-width:73px;
	text-align:center;
	
}
ul.tabs li:first-child{ /*--Removes the left border from the first child of the list--*/
border-left:none;	
	
}
ul.tabs li a {
	text-decoration: none;
	color: #333333;
	display: block;
	font-size: 11px;

	padding-right:5px;
	padding-left:5px;

	outline: none;
}
ul.tabs li a:hover {
	background: #fff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; 
	color:#3B5998;
}
ul.tabs li.active a{
	color:#3B5998;	
}

Step 15: बटन

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

1	/-----------------------------------------------------------------------------------/
2	/* Buttons
3	/-----------------------------------------------------------------------------------/
4	.button{
5	background-color:#ECEEF5;
6	border:1px solid #CAD4E7;
7	text-decoration:none;
8	-webkit-border-radius: 3px;
9	-moz-border-radius: 3px;
10	border-radius: 3px;
11	padding: 2px 3px 2px 2px;
12	margin-right:5px;
13	}
14	.button:hover{
15	border:1px solid #9DACCE;
16	text-decoration:none;
17
18	}
19	.buttonimage{
20	background:url(../images/icon.png);
21	color: #3B5998;
22	display: block;
23	width:12px;
24	height:12px;
25	margin-right:3px;
26	margin-top:1px;
27	margin-bottom:1px;
28	margin-left:2px;
29
30	}

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

1	/-----------------------------------------------------------------------------------/
2	/* Extra Components
3	/-----------------------------------------------------------------------------------/
4	.logo{
5	width:379px;
6	height:60px;
7	margin-left:auto;
8	margin-right:auto;
9	margin-bottom:26px;
10	position: relative;
11	-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
12	-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
13	box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
14	}
15	.search{
16	padding: 1px 5px 2px 0;
17	margin-bottom:20px;
18	width:240px;
19	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
20	-moz-box-sizing: border-box; /* Firefox, other Gecko */
21	box-sizing: border-box; /* Opera/IE 8+ */
22	}
23	.tabHeader{
24	background-color: #F2F2F2;
25	border-top: solid 1px #E2E2E2;
26	padding: 4px 5px 5px;
27	margin-top:15px;
28	margin-bottom:10px;
29	}
30	.profileimage{
31	float:left;
32	margin-right: 5px;
33	}

निष्कर्ष ...

तो हमारे पास यह है, हमारे पास 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