जैसे ही आप पृष्ठ का आकार बदलते हैं ये ब्लॉक तत्व एक दूसरे के इनायत से नीचे गिर जाते हैं। मैंने एक बाहरी स्टाइलशीट में मीडिया के प्रश्नों के कुछ अलग-अलग उदाहरणों को सेटअप किया है। यह बाद में कुछ संपादित करने के लिए वापस जाने पर शैलियों का ट्रैक रखना आसान बनाता है.

 
 
 
जेक रोशेलु
 
फ्रीलांस राइटर और वेब डेवलपर
  हडसन, मैसाचुसेट्स, अमेरीका  [email protected] मेरा संविभाग • @jakerocheleau 
 
  
 
 

इससे पहले कि हम विस्तृत सीएसएस में कूदें मैं माइक्रोडाटा के उपयोग के बारे में अधिक समझाना चाहता हूं। यदि आप निकट से देखते हैं तो मैंने नामों के साथ कई अलग-अलग तत्वों के अंदर विशेषताओं को लिट किया है वस्तु परक, आइटमस्कोप, तथा itemprop. ये सभी Schmea प्रोजेक्ट से संबंधित हैं जो वेब के लिए डेटा संरचना की पेशकश करने की उम्मीद करता है.

उपयोगी माइक्रोडेटा स्वरूपण

Google, याहू!, और बिंग सहित सभी प्रमुख खोज इंजनों ने डेटा मार्कअप के लिए स्कीमा को सर्वश्रेष्ठ वाक्यविन्यास के रूप में स्वीकार किया है। अपने बारे में विवरण लेबल करके यह इन खोज इंजनों को आपकी सामग्री के लिए संबंधित परिणाम ऑनलाइन प्रदर्शित करने में मदद करता है। चलो इसे स्थापित करने के तरीके को तोड़ते हैं.

आइटमस्कोप विशेषता को किसी भी कंटेनर पर लागू किया जाता है जो स्कीमा आइटम पर जानकारी रखता है। यह हमेशा आइटमटाइप विशेषता द्वारा पीछा किया जाता है, जो इस परिदृश्य में एक व्यक्ति का वर्णन कर रहा है। इस रैपर div के अंदर मैं अपने प्रलेखन पृष्ठ पर सूचीबद्ध किसी भी विवरण के साथ आइटमप्रॉप का उपयोग करके किसी भी सामग्री को लेबल कर सकता हूं.

अनुशंसित विधि तत्व के साथ सीधे जुड़ने के बजाय एक स्पैन टैग के अंदर अपनी सामग्री को लपेटने के लिए है। जब आप किसी फ़ोटो की तरह कुछ लेबल कर रहे हों, तो आपको आइटमप्रॉप को संलग्न करना चाहिए img सीधे तत्व। लेकिन अन्यथा आप अपने डेटा को स्पैन टैग में लपेटकर बहुत अधिक क्लीनर मार्कअप करेंगे.

कितना है बहुत अधिक?

मैं तर्क दूंगा कि आप जितना विस्तार कर सकते हैं, उसकी मात्रा की कोई सीमा नहीं है। माइक्रोडाटा एक ऑनलाइन संदर्भ के भीतर कंप्यूटर, लोगों, संगठनों, उत्पादों और अन्य वस्तुओं को पहचानने में मदद करने के लिए उपलब्ध है। अधिक जानकारी आप की पेशकश कर सकते हैं, बेहतर है.

यह ध्यान में रखना और खोलना सार्थक है और देखें कि आप इस माइक्रोडेटा का उपयोग अपनी वेबसाइट के पहलुओं में कैसे कर सकते हैं। यदि आप स्कीमा डॉक्यूमेंटेशन से गुजरने में 10-15 मिनट का समय लगाते हैं तो यह आपके लिए बहुत आसान है। हम फिर से शुरू होने वाले डेमो से दो ठोस उदाहरण देख सकते हैं:

 
 
कौशल सेट
 
 
विकास
 
 
एचटीएमएल 5 / CSS3
 
जावास्क्रिप्ट और jQuery
 
PHP बैकएंड
 
SQL डेटाबेस
 
Wordpress
 
प्लिग्ग सीएमएस
 
कुछ उद्देश्य-सी
 
 
 
 
सॉफ्टवेयर
 
 
एडोब फोटोशॉप
 
Adobe Dreamweaver
 
एमएस ऑफिस 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

अपने विभिन्न कौशल सूचीबद्ध करते समय मैंने एक नया कंटेनर सेट किया है जो आइटमलिस्ट स्कीमा को परिभाषित करता है। किसी व्यक्ति के तहत किसी भी प्रकार का कौशल या अनुभव नहीं था, इसलिए यह एक सुरक्षित विकल्प है। यहाँ मूल्य यह है कि Google प्रत्येक को समझ सकता है itemListElement एक दूसरे से संबंधित है। इस मामले में हमारे पास भाषाओं और सॉफ्टवेयरों की एक सूची है जो मुझे पता है कि कैसे काम करना है.

 
 
तात्कालिक लेख
 
  सीएसएस और जावास्क्रिप्ट के लिए 10 उपयोगी फ़ॉलबैक विधियाँ • में प्रकाशित जुलाई 2012
 
  WordPress में यूआरएल को फिर से लिखना: टिप्स और प्लगइन्स • में प्रकाशित जुलाई 2012
 
  जेपीईजी अनुकूलन वेब के लिए - अंतिम गाइड • में प्रकाशित जुलाई 2012
 
  सही HTML न्यूज़लैटर डिजाइन करने के लिए 9 ट्रिक्स • में प्रकाशित मई 2012
 
  Google वेबसाइट ऑप्टिमाइज़र के साथ A / B टेस्टिंग के लिए गाइड • में प्रकाशित मार्च 2012
 
 

एक और अच्छा उदाहरण लेख की सूची है जो बहुत नीचे पाया जाता है। लेख और ब्लॉग पोस्ट के लिए एक स्कीमा सेटअप है, सभी ऑनलाइन पाए जाने वाले सामग्री से संबंधित हैं। मैंने लेख URL और प्रकाशन की तारीख का संकेत दिया है जो इन खोज इंजन क्रॉलर के लिए पर्याप्त जानकारी से अधिक है.

बस ध्यान रखें कि माइक्रोडाटा सभी सामग्री को कंप्यूटर द्वारा व्यवस्थित करने के बारे में है। यह एकल-पृष्ठ फिर से शुरू एक विशिष्ट व्यक्ति के बारे में लक्षणों को परिभाषित करने के लिए सही उदाहरण है। ये हर वेबसाइट पर उपयोगी नहीं हैं, लेकिन यह समझने के लिए एक रोमांचक पद्धति है.

सापेक्ष सीएसएस शैलियाँ

इस अंतिम भाग में आइए एक नज़र डालते हैं कि इस पूरे वेबपेज को कैसे बनाया जाए। हमारे स्टाइलशीट के शीर्ष पर मैं कुछ प्रारंभिक रीसेट और मूल तत्व गुणों को परिभाषित कर रहा हूं। इनमें हेडर, सूची आइटम और एंकर लिंक होवर प्रभाव शामिल हैं.

मार्जिन: 0; गद्दी: 0;  html ऊंचाई: 101%;  body पृष्ठभूमि: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); फ़ॉन्ट-आकार: 62.5%; पैडिंग-बॉटम: 65 पीएक्स;  h1 फ़ॉन्ट-परिवार: "सिमोनिटा", "ट्रेबुचेट एमएस", एरियल, सैंस-सेरिफ़; रंग: # 454545; फ़ॉन्ट-आकार: 3.6em; मार्जिन-तल: 6px;  h2 फ़ॉन्ट-परिवार: "सिमोनिटा", "ट्रेबुचेट एमएस", एरियल, सैंस-सेरिफ़; रंग: # 484848; फ़ॉन्ट-आकार: 2.5em; मार्जिन-नीचे: 10px; पाठ-सजावट: रेखांकित करना;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; रंग: # 777; फ़ॉन्ट-वजन: सामान्य; फ़ॉन्ट-आकार: 1.8em; मार्जिन-नीचे: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; रंग: # 656565; फोंट की मोटाई: बोल्ड; फ़ॉन्ट-आकार: 1.75em; मार्जिन-नीचे: 4px;  पी फ़ॉन्ट-परिवार: "बल्थाजार", "ड्रॉइड सेरिफ़", टाइम्स न्यू रोमन, सेरिफ़; रंग: # 565656; फ़ॉन्ट-आकार: 1.8em; लाइन-ऊँचाई: 1.4em; मार्जिन-बॉटम: 15 पीएक्स; पैडिंग-लेफ्ट: 35 पीएक्स;  छोटा फ़ॉन्ट-परिवार: "बल्थाजार", सेरिफ़; रंग: # 656565; फ़ॉन्ट-आकार: 1.6em; प्रदर्शन क्षेत्र; मार्जिन-तल: 6px;  उल प्रदर्शन: ब्लॉक; सूची-शैली: कोई नहीं;  उल ली पैडिंग-लेफ्ट: 45 पीएक्स; सूची-शैली-प्रकार: कोई नहीं; ऊर्ध्वाधर-संरेखित करें: शीर्ष; पृष्ठभूमि: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; मार्जिन-बॉटम: 5 पीएक्स; फ़ॉन्ट-परिवार: "बल्थज़ार", सेरिफ़; रंग: # 666; फ़ॉन्ट-आकार: 1.6em; लाइन-ऊँचाई: 2.3em;  img सीमा: 0; अधिकतम-चौड़ाई: 100%;  a color: # 5582d6; पाठ-सजावट: कोई नहीं;  a: हॉवर टेक्स्ट-डेकोरेशन: अंडरलाइन;  

कस्टम फ़ॉन्ट स्टैक के अलावा कुछ भी दिलचस्प नहीं है। मैंने डिफ़ॉल्ट का उपयोग करने के बजाय एक अद्वितीय बुलेट आइकन भी पकड़ लिया “डिस्क”. आप समान खोज का पता लगाने का प्रयास करते समय चिह्न खोजक जैसी निर्देशिका के माध्यम से खोज करने का प्रयास कर सकते हैं.

/ ** @ ग्रूप कोर लेआउट ** / #w मार्जिन: 0px 50px; गद्दी: 20px 40px; पैडिंग-टॉप: 35 पीएक्स; पृष्ठभूमि: #fff; न्यूनतम-चौड़ाई: 260 पीएक्स; अधिकतम-चौड़ाई: 900 पीएक्स; बॉर्डर-बॉटम-राइट-रेडियस: 8 पीएक्स; बॉर्डर-बायीं-बाईं-त्रिज्या: 8px; -webkit-border-bottom-left-radius: 8px; -वेबकिट-बॉर्डर-बॉटम-राइट-रेडियस: 8 पीएक्स; -मोज़-बॉर्डर-रेडियस-बॉटमफ़्ट: 8 पीएक्स; -मोज़-बॉर्डर-त्रिज्या-निचला: 8 पीएक्स;  हैडर चौड़ाई: 100%;  / ** @group व्यक्तिगत सेटिंग्स ** / #info फ्लोट: बाएं; मार्जिन-बॉटम: 12 पीएक्स;  # फोटो फ्लोट: राइट;  # फोटो इम्ग -वेबकिट-बॉर्डर-रेडियस: 3 पीएक्स; -मोज़-बॉर्डर-रेडियस: 3 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; -webkit- बॉक्स-छाया: 0 2px 4px rgba (0, 0, 0, 0.2); -मोज़-बॉक्स-छाया: 0 2px 4px rgba (0, 0, 0, 0.2); बॉक्स-छाया: 0 2px 4px rgba (0, 0, 0, 0.2); पृष्ठभूमि-रंग: # एफ; बॉर्डर: 1px ठोस #ccc; गद्दी: 5 पीएक्स;  

पृष्ठ पर केवल कुछ महत्वपूर्ण ब्लॉक क्षेत्र हैं जिन पर ध्यान देने की आवश्यकता है। बेशक रैपर div अतिरिक्त मार्जिन और पैडिंग के साथ सेटअप है। इसके अलावा अधिकतम चौड़ाई 900px पर सीमित है क्योंकि किसी भी बड़े आकार को लगता है कि पृष्ठ में बहुत अधिक व्हाट्सएप है। मैंने पृष्ठ के निचले भाग में आंखों पर एक चिकना प्रभाव के लिए गोल कोनों का भी उपयोग किया है.

प्रभावी डिजाइन

संभवतः इस ऑनलाइन फिर से शुरू का सबसे महत्वपूर्ण पहलू उत्तरदायी कार्यक्षमता है। ब्राउज़र विंडो का आकार बदलते समय विभिन्न प्रभावों को प्राप्त करने के लिए मेरे पास पांच अलग-अलग ब्रेकपॉइंट सेटअप हैं.

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 740px) h1 फ़ॉन्ट-आकार: 4.5em;  h3 फ़ॉन्ट-आकार: 2.2em;  h2 प्रदर्शन: ब्लॉक; पाठ-संरेखण: केंद्र;  #info फ्लोट: कोई नहीं; प्रदर्शन क्षेत्र; पाठ-संरेखण: केंद्र;  # फोटो फ्लोट: कोई नहीं; प्रदर्शन क्षेत्र; पाठ-संरेखण: केंद्र;  #w पैडिंग: 20 पीएक्स 15 पीएक्स;  p गद्दी: 0;  

प्रारंभिक 740px ठीक उसी जगह पर है, जहां फोटो इमेज हमारे हेडर टेक्स्ट से टकराएगा। दाईं ओर फोटो ड्रॉप-डाउन करने के बजाय हम दोनों तत्वों को साफ करते हैं और पूरे लेआउट को केंद्र में रखते हैं। मैंने अधिक ठोस प्रभाव छोड़ने के लिए हेडर टेक्स्ट का आकार भी बढ़ाया है.

जैसे ही खिड़की छोटी हो जाती है मैंने रैपर div और पैराग्राफ से कुछ अतिरिक्त पैडिंग हटा दी है। हेडर के बाद हम जो समस्या चलाते हैं, वह यूएल लिस्टिंग के कौशल से है। मैं दो-स्तंभ दृष्टिकोण को तोड़ता हूं और इसके बजाय सूची आइटम एक दूसरे के बगल में तैर रहे हैं.

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 570px) ul li डिस्प्ले: इनलाइन-ब्लॉक; पैडिंग-लेफ्ट: 15 पीएक्स; चौड़ाई: 140 पीएक्स; पृष्ठभूमि-स्थिति: -5 पीएक्स 0 पीएक्स; मार्जिन-राइट: 6px; लाइन-ऊँचाई: 1.7em;  # स्किल्स-लेफ्ट, स्किल्स-राइट मार्जिन-बॉटम: 15px;  

इसके लिए कई डिफॉल्ट टेक्स्ट प्रॉपर्टीज को रिपॉजिट करने की भी जरूरत होती है। हमें लाइन की ऊंचाई को अपडेट करना होगा और प्रत्येक सूची आइटम के बुलेट आइकन को फिर से तैयार करना होगा। मैंने एक निश्चित चौड़ाई निर्धारित की है ताकि ग्रिड अगले ब्रेकपॉइंट तक अधिक व्यवस्थित दिखाई दे.

स्मार्टफोन के लिए कोडिंग

पिछले तीन मीडिया क्वेश्चन छोटे हैं फिर भी बहुत महत्वपूर्ण हैं। जैसा कि आप परिदृश्य और पोर्ट्रेट मोड के बीच स्विच करते हैं, iPhone किसी भी मोबाइल ब्राउज़र का आकार बदल देगा। अधिकांश एंड्रॉइड डिवाइस और विंडोज मोबाइल फोन के मामले में भी यही है.

@मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 480px) उल ली चौड़ाई: 120px;  #w मार्जिन: 0 20px;  @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 320px) #w मार्जिन: 0 10px;  / ** iPhone केवल ** / @मीडिया स्क्रीन और (अधिकतम-डिवाइस-चौड़ाई: 480px) ul li चौड़ाई: 150px;  

जब पहली बार 480px या उससे कम मारते हैं तो हम रैपर से कुछ और पैडिंग हटाते हैं और सूची आइटम को फिर से आकार देते हैं। फिर 320px में मैंने दस्तावेज़ के बाहर कुछ मार्जिन स्पेस को हटा दिया है। आप अभी भी टेक्सचर्ड बैकग्राउंड देख सकते हैं, लेकिन इस तरह के स्लिम वर्टिकल व्यूपोर्ट पर यह बहुत महत्वपूर्ण नहीं है.

अन्त में मैं उपयोग कर रहा हूँ अधिकतम-उपकरण-चौड़ाई iPhone डिवाइस को ही लक्षित करने के लिए, या किसी अन्य मोबाइल स्क्रीन को 480x की अधिकतम चौड़ाई के साथ लक्षित करें। इस मामले में, मैं सूची आइटम को थोड़ा व्यापक अपडेट करना चाहता हूं ताकि वे पूरी स्क्रीन में भरें। यह केवल परिदृश्य दृश्य में कौशल लिस्टिंग को प्रभावित करेगा क्योंकि किसी भी मतभेद को नोटिस करने के लिए पोर्ट्रेट बहुत पतला है.

• डेमो
• स्रोत कोड डाउनलोड करें

अंतिम विचार

इंटरनेट पर काम करने के लिए अक्सर ऑनलाइन कम से कम कुछ प्रकार के पोर्टफोलियो की आवश्यकता होती है। जब आप एक ही पृष्ठ फिर से शुरू करने के लिए अपने सभी विवरणों को एक साथ व्यवस्थित कर सकते हैं, तो यह दर्शाता है कि आप व्यवसाय से मतलब रखते हैं। वेब डिज़ाइन में व्यावसायिकता के ऐसे करिश्माई प्रदर्शन के लिए गंभीर नियोक्ता और संभावित ग्राहक एड़ी-चोटी का ज़ोर लगा देंगे.

मुझे उम्मीद है कि आप इस ट्यूटोरियल से कुछ प्रमुख बिंदुओं को दूर ले जा सकते हैं। दुनिया भर में किसी भी स्थान पर फ्रीलांसर केवल तकनीकी प्रयास के साथ खुद को विपणन कर सकते हैं। ऊपर मेरा डेमो स्रोत कोड डाउनलोड करने के लिए स्वतंत्र महसूस करें, और इस लेख पर अपने विचार हमारे टिप्पणियों क्षेत्र में साझा करें.