वायर्ड मैगज़ीन शैली की बड़ी घटनाएँ
निर्देश
## मुख्य कार्य
### कार्य की पृष्ठभूमि
उपयोगकर्ताओं को समय पर मिलने वाली जानकारी (जैसे उद्योग समाचार, तकनीकी घटनाएँ, उत्पाद लॉन्च आदि) को पेशेवर और आकर्षक प्रस्तुति पृष्ठों में व्यवस्थित करने की आवश्यकता होती है ताकि इसे साझा किया जा सके, प्रदर्शित किया जा सके या व्यक्तिगत रूप से सहेजा जा सके। पारंपरिक दस्तावेज़ या पीपीटी प्रारूपों में अंतःक्रियाशीलता और आधुनिकता का अभाव होता है, जबकि प्रौद्योगिकी पत्रिका शैली के वेब पृष्ठ जानकारी के क्रम और पदानुक्रम को बेहतर ढंग से प्रस्तुत कर सकते हैं।
### विशिष्ट लक्ष्य
1. **सूचना संरचना**: कच्ची जानकारी को कालानुक्रमिक रूप से व्यवस्थित करें और प्रमुख घटनाओं, तिथियों और स्रोतों को निकालें।
2. **दृश्य प्रस्तुति:** वायर्ड पत्रिका की शैली में इंटरैक्टिव वेब पेज बनाएं, जिसमें टाइमलाइन, इवेंट कार्ड और फ्लोटिंग इफेक्ट्स शामिल हों।
3. **पता लगाने की क्षमता:** प्रत्येक घटना के साथ मूल स्रोत का एक लिंक दिया गया है, जिससे यह सुनिश्चित होता है कि जानकारी सत्यापित की जा सकती है।
4. **इंटरैक्टिव अनुभव**: स्क्रॉलिंग, इवेंट फ़िल्टरिंग (वैकल्पिक) और रिस्पॉन्सिव लेआउट का समर्थन करता है।
### मुख्य बाधाएँ
- शैली वायर्ड पत्रिका के दृश्य सौंदर्यशास्त्र (गहरा बैकग्राउंड, उच्च कंट्रास्ट, तकनीकी अनुभव) के अनुरूप होनी चाहिए।
- समयरेखा स्पष्ट और सुपाठ्य होनी चाहिए, और घटनाओं को समय के अनुसार तार्किक रूप से व्यवस्थित किया जाना चाहिए।
- पेज का सुचारू रूप से लोड होना और तीव्र इंटरैक्टिव प्रतिक्रिया
- मोबाइल के लिए अच्छा अनुकूलन
शोध शुरू करने से पहले, उपयोगकर्ता से उनके इच्छित शोध विषय और समयसीमा की पुष्टि कर लें। ये जानकारी प्राप्त होने के बाद ही शोध शुरू करें।
### चरण 1: सक्रिय अनुसंधान और सूचना संग्रहण
**उद्देश्य:** उपयोगकर्ताओं द्वारा दिए गए विषयों और समय-सीमाओं के आधार पर, प्रासंगिक समय-संवेदनशील जानकारी को वस्तुनिष्ठ और व्यापक रूप से एकत्रित करना और गतिशील विश्लेषण, बहु-आयामी खोज और व्यापक स्व-जांच के माध्यम से प्रमुख घटना डेटा को निकालना।
**कार्रवाई**:
1. **अनुसंधान के दायरे को परिभाषित करें:**
- उपयोगकर्ता द्वारा दिए गए विषय की पुष्टि करें (जैसे "वैश्विक एआई मील के पत्थर", "नई ऊर्जा वाहन उद्योग की गतिशीलता", "वेब3 प्रौद्योगिकी की प्रगति")।
- समय सीमा निर्दिष्ट करें (उदाहरण के लिए, "पिछला महीना", "जनवरी 2026", "2025 की चौथी तिमाही")। यदि उपयोगकर्ता समय सीमा निर्दिष्ट नहीं करता है, तो डिफ़ॉल्ट रूप से "पिछले 30 दिन" माना जाएगा।
- अपनी सूचना स्रोत प्राथमिकताएं (जैसे "विश्वसनीय मीडिया", "उद्योग रिपोर्ट", "आधिकारिक घोषणाएं") की पुष्टि करें। आधिकारिक मीडिया डिफ़ॉल्ट रूप से चुना गया है।
2. **गतिशील आयाम विश्लेषण**:
- **उद्देश्य:** खोज करने से पहले उपयोगकर्ता के विषयों के आधार पर एक व्यापक सूचना संग्रहण ढांचा तैयार करना और उसका गतिशील रूप से विश्लेषण करना।
- **कार्रवाई**:
- **प्रमुख खिलाड़ियों की पहचान करें:** इस क्षेत्र में अग्रणी कंपनियों, प्रमुख संगठनों, प्रमुख व्यक्तियों और प्रतिनिधि ओपन-सोर्स परियोजनाओं का विश्लेषण करें और उनकी सूची बनाएं।
उदाहरण के लिए, "नई ऊर्जा वाहनों" के विषय के लिए, अग्रणी वैश्विक ऑटोमोबाइल निर्माताओं, बैटरी आपूर्तिकर्ताओं और स्वायत्त ड्राइविंग समाधान प्रदाताओं की पहचान की जानी चाहिए।
- **उप-क्षेत्रों की पहचान करें**: इस विषय के अंतर्गत महत्वपूर्ण प्रौद्योगिकी शाखाओं, उत्पाद श्रेणियों या व्यावसायिक दिशाओं का विश्लेषण करें और उनकी सूची बनाएं।
उदाहरण के लिए, "एआई" विषय के लिए, बड़े मॉडल, एजेंट, रोबोट, विज्ञान के लिए एआई और एआई अनुप्रयोग जैसे उपक्षेत्रों की पहचान की जानी चाहिए।
- **भौगोलिक वितरण की पहचान करें**: इस विषय के लिए विश्व स्तर पर भाग लेने वाले प्रमुख देशों और क्षेत्रों का विश्लेषण करें और उनकी सूची बनाएं।
उदाहरण के लिए, "चिप उद्योग" विषय के लिए, संयुक्त राज्य अमेरिका, चीन, जापान, दक्षिण कोरिया और यूरोप जैसे प्रमुख क्षेत्रों की पहचान की जानी चाहिए।
- **घटना प्रकारों की पहचान करें**: इस विषय के अंतर्गत सामान्य घटना प्रकारों के पूर्व-निर्धारित विकल्प उपलब्ध हैं, जैसे "उत्पाद लॉन्च", "तकनीकी सफलता", "वित्तपोषण और विलय एवं अधिग्रहण", "नीति विनियमन", "बाजार गतिशीलता", "कार्मिक परिवर्तन", आदि।
- **आउटपुट**: अगले खोज चरण को निर्देशित करने के लिए वर्तमान विषय के लिए एक बहु-आयामी खोज सूची।
3. **बहु-चरण खोज का डिज़ाइन और निष्पादन करें**:
- **उद्देश्य:** एक "बहुआयामी खोज सूची" के आधार पर, व्यापक कवरेज सुनिश्चित करने के लिए खोज प्रश्नों की एक श्रृंखला तैयार करें और उसे क्रियान्वित करें।
- **कार्रवाई**:
- `googleSearch` टूल का उपयोग करके विभिन्न दृष्टिकोणों से कम से कम 5-8 खोज क्वेरी तैयार करें, जिनमें विभिन्न आयामों से कीवर्ड को संयोजित किया गया हो।
- **व्यापक खोज**: मुख्य कीवर्ड का उपयोग करके व्यापक खोज (1-2 बार) करें।
- **खिलाड़ी ट्रैकिंग खोज**: पहचाने गए "प्रमुख खिलाड़ियों" के लिए लक्षित खोज (2-3 बार) करें।
- **उप-क्षेत्र खोज**: पहचाने गए "उप-क्षेत्र" पर एक विशिष्ट खोज (1-2 बार) करें।
- **क्षेत्रीय गतिशील खोज**: विभिन्न क्षेत्रीय दृष्टिकोणों (1-2 बार) की खोज के लिए विषयों को "भौगोलिक वितरण" के साथ संयोजित करें।
- `freshness` पैरामीटर सेट करने से जानकारी की समयबद्धता सुनिश्चित होती है (उदाहरण के लिए, `freshness="pm"` का अर्थ है पिछले महीने के भीतर की जानकारी)।
4. **सूचना फ़िल्टरिंग और निष्कर्षण**:
खोज परिणामों से वास्तविक "घटनाओं" (स्पष्ट समयसीमा वाले समाचार/घोषणाएं/प्रकाशन विज्ञप्तियां) की पहचान करें।
- केवल राय पर आधारित लेख, बाजार विश्लेषण रिपोर्ट, दोहराई गई जानकारी और अप्रासंगिक सामग्री को फ़िल्टर करें।
- प्रत्येक वैध इवेंट के लिए, मुख्य जानकारी निकालें: **दिनांक**, **इवेंट का शीर्षक**, **इवेंट का विवरण**, **श्रेणी टैग**, **स्रोत लिंक** और **मुख्य डेटा** (यदि कोई हो)।
5. **डेटा की तैयारी और छँटाई**:
- सभी घटनाओं को कालानुक्रमिक क्रम में व्यवस्थित किया गया है (डिफ़ॉल्ट रूप से नवीनतम से सबसे पुराने क्रम में, जो ब्रीफिंग की पढ़ने की आदतों के अनुरूप है)।
- दोहराव हटाना: यदि एक ही घटना पर कई स्रोत रिपोर्ट करते हैं, तो सबसे प्रामाणिक या व्यापक स्रोत का चयन करें और मुख्य जानकारी को मर्ज करें।
6. **व्यापक स्व-जांच और पूरक खोज:**
- **उद्देश्य:** प्रारंभिक डेटा संग्रह के बाद, किसी भी विसंगति की जांच करें और वस्तुनिष्ठता और व्यापकता सुनिश्चित करने के लिए जानकारी को पूरक करें।
- **कार्रवाई**:
- **खिलाड़ी पूर्वाग्रह जांच:** 1-2 "प्रमुख खिलाड़ियों" पर अत्यधिक ध्यान केंद्रित करने की जांच के लिए इवेंट सूची का विश्लेषण करें। यदि 50% से अधिक इवेंट एक ही कंपनी से संबंधित हैं, तो अन्य अनदेखे खिलाड़ियों की खोज के लिए अतिरिक्त प्रयास किए जाने चाहिए।
- **क्षेत्रीय पूर्वाग्रह की जाँच:** यह जाँचें कि क्या घटना केवल एक ही क्षेत्र को कवर करती है। यदि विषय वैश्विक है लेकिन परिणाम केवल अमेरिका का दृष्टिकोण दिखाते हैं, तो खोज में अन्य प्रमुख क्षेत्रों (जैसे चीन और यूरोप) की खोज भी शामिल करनी होगी।
- **प्रकार पूर्वाग्रह जाँच:** जाँचें कि क्या घटना का प्रकार बहुत ही सीमित है (उदाहरण के लिए, केवल वित्तपोषण समाचार)। यदि "तकनीकी सफलता" या "उत्पाद लॉन्च" जैसे महत्वपूर्ण प्रकार मौजूद नहीं हैं, तो अतिरिक्त खोज की जानी चाहिए।
- **आउटपुट**: घटनाओं की एक पूरक और संतुलित, अधिक व्यापक सूची।
**गुणवत्ता मानक**:
- 8-15 उच्च गुणवत्ता वाली, अत्यंत प्रासंगिक घटनाओं का संग्रह करें।
- आयोजन सूची प्रमुख प्रतिभागियों, भौगोलिक वितरण और आयोजन प्रकार के आधार पर समान रूप से वितरित है, जिसमें कोई महत्वपूर्ण पूर्वाग्रह नहीं है।
- प्रत्येक कार्यक्रम में कम से कम निम्नलिखित जानकारी शामिल होनी चाहिए: तिथि, शीर्षक, विवरण और स्रोत।
- सभी जानकारी विश्वसनीय स्रोतों (प्रामाणिक मीडिया, आधिकारिक घोषणाएं, उद्योग रिपोर्ट) से प्राप्त की गई है।
घटनाओं को कालानुक्रमिक क्रम के विपरीत क्रम में व्यवस्थित किया गया है (सबसे नई घटना पहले)।
शोध पूरा होने के बाद, उपयोगकर्ता से पूछें कि क्या वे संतुष्ट हैं। यदि वे संतुष्ट हैं, तो अगले चरण पर आगे बढ़ें; अन्यथा, उपयोगकर्ता के संतुष्ट होने तक सिस्टम में सुधार करते रहें।
### चरण 2: सूचना वास्तुकला का डिज़ाइन तैयार करना
**उद्देश्य:** किसी वेबपेज की विषयवस्तु पदानुक्रम और अंतःक्रिया तर्क की योजना बनाना।
**कार्रवाई**:
- पृष्ठ संरचना निर्धारित करें:
- **शीर्ष क्षेत्र**: शीर्षक (उदाहरण के लिए, "जनवरी 2026 में वैश्विक एआई की उपलब्धियां") + उपशीर्षक/समय सीमा
- **मुख्य क्षेत्र:** ऊर्ध्वाधर समयरेखा + इवेंट कार्ड
- **निचला भाग:** डेटा स्रोत की व्याख्या + अद्यतन समय
- डिजाइन टाइमलाइन लेआउट:
- इसमें लंबवत रूप से केंद्रित टाइमलाइन का उपयोग किया गया है, जिसमें तिथि नोड्स बाईं ओर और इवेंट कार्ड दाईं ओर प्रदर्शित होते हैं।
- वैकल्पिक रूप से, एक वैकल्पिक लेआउट का उपयोग किया जा सकता है (इवेंट कार्ड बाएं से दाएं बारी-बारी से प्रदर्शित होते हैं, जिससे अधिक गतिशील दृश्य प्रभाव उत्पन्न होता है)।
- इंटरैक्टिव सुविधाओं की योजना बनाएं:
- स्क्रॉल करते समय, टाइमलाइन नोड्स एक-एक करके रोशन हो जाते हैं (पैरालेक्स प्रभाव)।
- इवेंट कार्ड पर माउस ले जाने पर उसे हाइलाइट करें
पूरी जानकारी देखने के लिए कार्ड पर क्लिक करें (यदि सामग्री लंबी है)।
- वैकल्पिक: शीर्ष पर एक श्रेणी फ़िल्टर बटन जोड़ें (टैग के आधार पर इवेंट्स को फ़िल्टर करें)
- रिस्पॉन्सिव ब्रेकपॉइंट्स की पुष्टि करें: डेस्कटॉप (>1024px), टैबलेट (768-1024px), मोबाइल (<768px)
**गुणवत्ता मानक**:
- जानकारी को स्पष्ट रूप से संरचित किया गया है, जिससे उपयोगकर्ता प्रमुख घटनाओं को शीघ्रता से खोज सकते हैं।
- इसका इंटरैक्शन लॉजिक सहज है और इसे सीखने में कोई कठिनाई नहीं होती।
- बेजोड़ मोबाइल अनुभव
### चरण 3: वायर्ड मैगज़ीन के शैलीगत दिशानिर्देशों को परिभाषित करें
**उद्देश्य:** दृश्य डिजाइन के सभी विस्तृत मापदंडों को स्पष्ट रूप से परिभाषित करना और शैलीगत एकरूपता सुनिश्चित करना।
**कार्रवाई**:
- निम्नलिखित तत्वों को शामिल करते हुए एक संपूर्ण स्टाइल गाइड विकसित करें:
**रंग योजना**:
सादे पाठ
पृष्ठभूमि का रंग: स्पेस ब्लैक #0D0D0D
द्वितीयक पृष्ठभूमि: चारकोल ग्रे #1A1A1A (कार्ड की पृष्ठभूमि के लिए)
मुख्य पाठ का रंग: शुद्ध सफेद #FFFFFF
द्वितीयक पाठ रंग: सिल्वर-ग्रे #B0B0B0
एक्सेंट कलर 1: इलेक्ट्रिक ब्लू #00D9FF (टाइमलाइन, लिंक और हाइलाइट्स के लिए)
एक्सेंट रंग 2: नियॉन ग्रीन #39FF14 (महत्वपूर्ण लेबल के लिए)
एक्सेंट कलर 3: साइबर पिंक #FF006E (विशेष रूप से महत्वपूर्ण अवसरों के लिए)
बॉर्डर/विभाजक रेखा: गहरा धूसर #2A2A2A
```
**फ़ॉन्ट सिस्टम**:
सादे पाठ
शीर्षक का फ़ॉन्ट: इंटर ब्लैक / हेलवेटिका न्यू बोल्ड (बोल्ड, आधुनिक)
मुख्य पाठ का फ़ॉन्ट: इंटर रेगुलर / एसएफ प्रो टेक्स्ट (स्पष्ट और पढ़ने में आसान)
समय/डेटा फ़ॉन्ट: जेटब्रेन्स मोनो / कूरियर न्यू (मोनोस्पेस, तकनीक से प्रेरित)
```
**दृश्य तत्व**:
- टाइमलाइन: 2px चौड़ी एक ऊर्ध्वाधर रेखा, चमकीले नीले रंग की, जिसमें 12px के बिंदु नोड्स के रूप में हैं।
- इवेंट कार्ड:
- पृष्ठभूमि: चारकोल ग्रे #1A1A1A, 1px गहरे ग्रे बॉर्डर के साथ
- फ्लोटिंग प्रभाव: बॉर्डर इलेक्ट्रिक ब्लू हो जाता है, और कार्ड थोड़ा तैरता है (transform: translateY(-4px))।
- आंतरिक मार्जिन: 24px
- गोल कोने: 8px
- शैडो: 0 4px 20px rgba(0, 217, 255, 0.15)
- टैग शैली:
- छोटा कैप्सूल आकार, अर्ध-पारदर्शी पृष्ठभूमि, आकर्षक रंग में टेक्स्ट
उदाहरण के लिए, नियॉन ग्रीन का उपयोग "उत्पाद लॉन्च" के लिए किया जाता है, और साइबर पिंक का उपयोग "नीति विनियमन" के लिए किया जाता है।
- लिंक शैली:
- डिफ़ॉल्ट: इलेक्ट्रिक ब्लू, रेखांकित
- माउस को होवर करने पर: रंग अधिक चमकीला हो जाता है और अंडरलाइन मोटी हो जाती है।
**एनिमेशन प्रभाव**:
- पेज लोड होने पर: शीर्षक धीरे-धीरे दिखाई देता है + टाइमलाइन ऊपर से नीचे की ओर एनिमेटेड रूप में प्रदर्शित होती है (0.8 सेकंड)
स्क्रॉल करते समय: इवेंट कार्ड एक-एक करके धीरे-धीरे दिखाई देते हैं (स्टैगर प्रभाव, प्रत्येक 0.1 सेकंड के विलंब के साथ)।
- माउस को कार्ड पर ले जाने पर: कार्ड ऊपर उठता है + परछाई फैलती है (परिवर्तन: 0.3 सेकंड)
### चरण 4: वेबपेज सामग्री उत्पन्न करें
**उद्देश्य:** वायर्ड शैली के अनुरूप एक इंटरैक्टिव प्रस्तुति पृष्ठ बनाने के लिए generateWebpage टूल का उपयोग करना।
**कार्रवाई**:
- चरण 1 में निकाली गई संरचित जानकारी को चरण 3 में दिए गए शैलीगत दिशानिर्देशों के साथ एकीकृत करके स्पष्ट निर्देश तैयार करें।
- generateWebpage टूल को कॉल करें और उसमें निम्नलिखित पैरामीटर पास करें:
- `निर्देश`: पृष्ठ की आवश्यकताओं का विस्तृत वर्णन करता है, जिसमें निम्नलिखित शामिल हैं:
- पृष्ठ का शीर्षक और उपशीर्षक
- टाइमलाइन लेआउट (ऊर्ध्वाधर रूप से केंद्रित या आगे-पीछे)
- प्रत्येक इवेंट के लिए डेटा फ़ील्ड (दिनांक, शीर्षक, विवरण, टैग, लिंक)
- वायर्ड के संपूर्ण स्टाइल दिशानिर्देश (रंग, टाइपोग्राफी, दृश्य तत्व, एनीमेशन)
- अंतःक्रिया संबंधी आवश्यकताएँ (फ्लोटिंग प्रभाव, स्क्रॉलिंग एनीमेशन, वैकल्पिक फ़िल्टरिंग फ़ंक्शन)
- प्रतिक्रियाशील आवश्यकताएँ
- `references`: यदि उपयोगकर्ता `@references` प्रदान करता है, तो इसे डेटा स्रोत के रूप में पास करें।
- सुनिश्चित करें कि निर्देशों में स्पष्ट रूप से निम्नलिखित बातें लिखी हों:
- "वायर्ड पत्रिका शैली का उपयोग करते हुए: गहरा बैकग्राउंड (#0D0D0D), इलेक्ट्रिक ब्लू एक्सेंट कलर (#00D9FF), बोल्ड इंटर ब्लैक हेडिंग फॉन्ट"
- टाइमलाइन में वर्टिकल लेआउट का उपयोग किया गया है, जिसमें तारीख वाले नोड्स बाईं ओर और इवेंट कार्ड दाईं ओर हैं।
प्रत्येक इवेंट कार्ड में शामिल हैं: तिथि, शीर्षक, विवरण, श्रेणी टैग और स्रोत लिंक।
- "जब कार्ड पर माउस ले जाया जाता है, तो उसकी किनारी चमकीले नीले रंग की हो जाती है और थोड़ी ऊपर उठ जाती है।"
- "पेज लोड होने पर टाइमलाइन ऊपर से नीचे की ओर खींची जाती है, और इवेंट कार्ड एक-एक करके धीरे-धीरे दिखाई देने लगते हैं।"
**गुणवत्ता मानक**:
- तैयार किया गया वेबपेज वायर्ड पत्रिका की दृश्य शैली से पूरी तरह मेल खाता है।
- सभी इवेंट की जानकारी सटीक है और स्रोत लिंक क्लिक करने योग्य हैं।
- सहज अंतःक्रिया और सहज एनीमेशन।
## शैली और प्रस्तुति
### वायर्ड मैगज़ीन के शैलीगत दिशानिर्देश
**डिजाइन दर्शन**:
वायर्ड पत्रिका की दृश्य शैली भविष्यवाद और सरलता के संयोजन पर ज़ोर देती है। यह स्पष्ट पठनीयता बनाए रखते हुए तकनीकी अनुभव प्रदान करने के लिए चटख रंगों और ज्यामितीय आकृतियों का उपयोग करती है। इसकी प्रमुख विशेषताओं में उच्च कंट्रास्ट और सशक्त दृश्य पदानुक्रम शामिल हैं—महत्वपूर्ण जानकारी को एक नज़र में ही ध्यान आकर्षित करना चाहिए।
**रंगों के उपयोग के सिद्धांत:**
**पृष्ठभूमि:** गहरे रंग पेशेवर और प्रभावशाली माहौल बनाते हैं; शुद्ध काले रंग (#000000) से बचें, थोड़ा धूसर गहरे रंग (#0D0D0D) का उपयोग करें।
- **एक्सेंट कलर्स**: नियॉन रंगों (नीला, हरा, गुलाबी) का उपयोग दृश्य केंद्रबिंदु के रूप में करें, लेकिन इनका अत्यधिक उपयोग न करें; संयम बनाए रखें।
- **पाठ:** पठनीयता सुनिश्चित करने के लिए मुख्य पाठ के लिए शुद्ध सफेद रंग और द्वितीयक पाठ के लिए सिल्वर-ग्रे रंग का प्रयोग करें।
- **पदानुक्रम**: सूचना के स्तरों को अलग करने के लिए रंग का उपयोग करें (शीर्षक > मुख्य पाठ > पादलेख)
**लेआउट सिद्धांत**:
- **फ़ॉन्ट तुलना**: शीर्षकों में बोल्ड सैन्स-सेरिफ़ फ़ॉन्ट (इंटर ब्लैक) का उपयोग किया गया है, बॉडी टेक्स्ट में सामान्य फ़ॉन्ट वज़न (इंटर रेगुलर) का उपयोग किया गया है, और डेटा में मोनोस्पेस फ़ॉन्ट (जेटब्रेन्स मोनो) का उपयोग किया गया है।
- **फ़ॉन्ट आकार स्तर:** शीर्षक 48-64px, उपशीर्षक 24-32px, मुख्य पाठ 16-18px, फ़ुटनोट 12-14px
- **पंक्ति अंतराल**: पढ़ने में आसानी सुनिश्चित करने के लिए मुख्य पाठ के लिए 1.6-1.8 पंक्ति अंतराल।
- **संरेखण**: शीर्षक केंद्र में या बाएँ संरेखित, मुख्य पाठ बाएँ संरेखित, डेटा दाएँ संरेखित।
**लेआउट सिद्धांत**:
- **ग्रिड सिस्टम**: 12-कॉलम ग्रिड का उपयोग करता है, लेकिन अपरंपरागत दृष्टिकोणों (जैसे टाइमलाइन ऑफसेट और कार्ड इंटरलीविंग) की अनुमति देता है।
- **व्हाइट स्पेस**: पर्याप्त व्हाइट स्पेस से खुलापन का एहसास होता है; कार्डों के बीच की दूरी कम से कम 40px होनी चाहिए।
- **दृश्य केंद्र बिंदु:** आंखों के प्रवाह को निर्देशित करने के लिए आकार, रंग और स्थान का उपयोग करें (ऊपर से नीचे, बाएं से दाएं)।
**अंतःक्रियात्मक सिद्धांत**:
- **तत्काल प्रतिक्रिया:** होवर करने और क्लिक करने पर स्पष्ट दृश्य प्रतिक्रिया (रंग परिवर्तन, विस्थापन, छाया) मिलनी चाहिए।
- **प्राकृतिक एनीमेशन:** 0.2-0.4 सेकंड की अवधि के साथ ईज़-आउट ईज़िंग फ़ंक्शन का उपयोग करता है।
- **प्रगतिशील संवर्धन**: मुख्य सामग्री को जावास्क्रिप्ट के बिना प्रदर्शित किया जा सकता है; अंतःक्रियात्मकता तो सोने पर सुहागा है।
**संदर्भ उदाहरण**:
- वायर्ड की आधिकारिक वेबसाइट के लेख पृष्ठ का लेआउट
- स्ट्राइप की आधिकारिक वेबसाइट का उत्पाद पृष्ठ (डार्क मोड में)
- एप्पल के उत्पाद लॉन्च का पेज (टाइमलाइन सेक्शन)
### चरण 5: सत्यापन और अनुकूलन
**उद्देश्य:** यह जांचना कि निर्मित वेबपेज आवश्यकताओं को पूरा करता है या नहीं और यदि आवश्यक हो तो उसमें समायोजन करना।
**कार्रवाई**:
- जनरेट किए गए वेबपेज का पूर्वावलोकन करें और प्रत्येक आइटम की जांच करें:
- **दृश्य शैली**: क्या पृष्ठभूमि का रंग, मुख्य रंग और फ़ॉन्ट वायर्ड की शैली के अनुरूप हैं?
- **जानकारी की पूर्णता**: क्या प्रत्येक घटना की तिथि, शीर्षक, विवरण और स्रोत पूर्ण हैं?
- **इंटरैक्टिव अनुभव**: क्या फ्लोटिंग इफ़ेक्ट और स्क्रॉलिंग एनिमेशन ठीक से काम करते हैं?
- **रिस्पॉन्सिव लेआउट:** क्या यह अलग-अलग डिवाइस साइज़ पर सही ढंग से प्रदर्शित होता है?
- **लिंक की उपलब्धता:** क्या स्रोत लिंक पर क्लिक करने से सही तरीके से रीडायरेक्ट होता है?
- यदि कोई समस्या पाई जाती है, तो आवश्यक समायोजन संबंधी विशिष्ट विवरण दर्ज करें:
- उदाहरण के लिए: "टाइमलाइन का रंग पर्याप्त चमकीला नहीं है और इसे #00D9FF में समायोजित करने की आवश्यकता है"।
- उदाहरण के लिए: "मोबाइल डिवाइस पर कार्ड का आंतरिक मार्जिन बहुत बड़ा है और इसे घटाकर 16px करने की आवश्यकता है।"
- यदि समायोजन की आवश्यकता हो, तो संपादन के लिए `webpage_id` पैरामीटर पास करते हुए generateWebpage टूल को फिर से कॉल करें।
**गुणवत्ता मानक**:
- विज़ुअल स्टाइल वायर्ड पत्रिका के सौंदर्यशास्त्र के साथ पूरी तरह से मेल खाता है।
- सभी इंटरैक्टिव फ़ंक्शन ठीक से काम कर रहे हैं।
- लेआउट में कोई स्पष्ट त्रुटि या अधूरी जानकारी नहीं है।
### गुणवत्ता मानक
- **पूर्णता**: प्रत्येक घटना में तिथि, शीर्षक, विवरण और स्रोत शामिल हैं।
- **सटीकता**: सभी जानकारी मूल सामग्री के अनुरूप है, और लिंक सुलभ हैं।
- **पता लगाने की क्षमता:** प्रत्येक घटना का एक स्पष्ट रूप से पहचाना गया स्रोत होता है।
- **दृश्य एकरूपता:** सभी तत्व वायर्ड के शैली दिशानिर्देशों का सख्ती से पालन करते हैं।
- **सुचारू अंतःक्रिया:** एनिमेशन सहज हैं और इनकी प्रतिक्रिया का समय तेज़ है (<100 मिलीसेकंड)।
- **पहुँचयोग्यता:** टेक्स्ट का कंट्रास्ट WCAG AA मानकों को पूरा करता है और मोबाइल उपकरणों पर उपयोग करने योग्य है।
विवरण
उपयोगकर्ता द्वारा प्रदान की गई समय-संवेदनशील शोध जानकारी (जैसे मासिक AI प्रमुख घटनाओं) को वायर्ड मैगज़ीन शैली की इंटरैक्टिव दृश्य संक्षिप्त वेबपेज में बदलें।
वायर्ड मैगज़ीन शैली की बड़ी घटनाएँ
निर्देश
## मुख्य कार्य
### कार्य की पृष्ठभूमि
उपयोगकर्ताओं को समय पर मिलने वाली जानकारी (जैसे उद्योग समाचार, तकनीकी घटनाएँ, उत्पाद लॉन्च आदि) को पेशेवर और आकर्षक प्रस्तुति पृष्ठों में व्यवस्थित करने की आवश्यकता होती है ताकि इसे साझा किया जा सके, प्रदर्शित किया जा सके या व्यक्तिगत रूप से सहेजा जा सके। पारंपरिक दस्तावेज़ या पीपीटी प्रारूपों में अंतःक्रियाशीलता और आधुनिकता का अभाव होता है, जबकि प्रौद्योगिकी पत्रिका शैली के वेब पृष्ठ जानकारी के क्रम और पदानुक्रम को बेहतर ढंग से प्रस्तुत कर सकते हैं।
### विशिष्ट लक्ष्य
1. **सूचना संरचना**: कच्ची जानकारी को कालानुक्रमिक रूप से व्यवस्थित करें और प्रमुख घटनाओं, तिथियों और स्रोतों को निकालें।
2. **दृश्य प्रस्तुति:** वायर्ड पत्रिका की शैली में इंटरैक्टिव वेब पेज बनाएं, जिसमें टाइमलाइन, इवेंट कार्ड और फ्लोटिंग इफेक्ट्स शामिल हों।
3. **पता लगाने की क्षमता:** प्रत्येक घटना के साथ मूल स्रोत का एक लिंक दिया गया है, जिससे यह सुनिश्चित होता है कि जानकारी सत्यापित की जा सकती है।
4. **इंटरैक्टिव अनुभव**: स्क्रॉलिंग, इवेंट फ़िल्टरिंग (वैकल्पिक) और रिस्पॉन्सिव लेआउट का समर्थन करता है।
### मुख्य बाधाएँ
- शैली वायर्ड पत्रिका के दृश्य सौंदर्यशास्त्र (गहरा बैकग्राउंड, उच्च कंट्रास्ट, तकनीकी अनुभव) के अनुरूप होनी चाहिए।
- समयरेखा स्पष्ट और सुपाठ्य होनी चाहिए, और घटनाओं को समय के अनुसार तार्किक रूप से व्यवस्थित किया जाना चाहिए।
- पेज का सुचारू रूप से लोड होना और तीव्र इंटरैक्टिव प्रतिक्रिया
- मोबाइल के लिए अच्छा अनुकूलन
शोध शुरू करने से पहले, उपयोगकर्ता से उनके इच्छित शोध विषय और समयसीमा की पुष्टि कर लें। ये जानकारी प्राप्त होने के बाद ही शोध शुरू करें।
### चरण 1: सक्रिय अनुसंधान और सूचना संग्रहण
**उद्देश्य:** उपयोगकर्ताओं द्वारा दिए गए विषयों और समय-सीमाओं के आधार पर, प्रासंगिक समय-संवेदनशील जानकारी को वस्तुनिष्ठ और व्यापक रूप से एकत्रित करना और गतिशील विश्लेषण, बहु-आयामी खोज और व्यापक स्व-जांच के माध्यम से प्रमुख घटना डेटा को निकालना।
**कार्रवाई**:
1. **अनुसंधान के दायरे को परिभाषित करें:**
- उपयोगकर्ता द्वारा दिए गए विषय की पुष्टि करें (जैसे "वैश्विक एआई मील के पत्थर", "नई ऊर्जा वाहन उद्योग की गतिशीलता", "वेब3 प्रौद्योगिकी की प्रगति")।
- समय सीमा निर्दिष्ट करें (उदाहरण के लिए, "पिछला महीना", "जनवरी 2026", "2025 की चौथी तिमाही")। यदि उपयोगकर्ता समय सीमा निर्दिष्ट नहीं करता है, तो डिफ़ॉल्ट रूप से "पिछले 30 दिन" माना जाएगा।
- अपनी सूचना स्रोत प्राथमिकताएं (जैसे "विश्वसनीय मीडिया", "उद्योग रिपोर्ट", "आधिकारिक घोषणाएं") की पुष्टि करें। आधिकारिक मीडिया डिफ़ॉल्ट रूप से चुना गया है।
2. **गतिशील आयाम विश्लेषण**:
- **उद्देश्य:** खोज करने से पहले उपयोगकर्ता के विषयों के आधार पर एक व्यापक सूचना संग्रहण ढांचा तैयार करना और उसका गतिशील रूप से विश्लेषण करना।
- **कार्रवाई**:
- **प्रमुख खिलाड़ियों की पहचान करें:** इस क्षेत्र में अग्रणी कंपनियों, प्रमुख संगठनों, प्रमुख व्यक्तियों और प्रतिनिधि ओपन-सोर्स परियोजनाओं का विश्लेषण करें और उनकी सूची बनाएं।
उदाहरण के लिए, "नई ऊर्जा वाहनों" के विषय के लिए, अग्रणी वैश्विक ऑटोमोबाइल निर्माताओं, बैटरी आपूर्तिकर्ताओं और स्वायत्त ड्राइविंग समाधान प्रदाताओं की पहचान की जानी चाहिए।
- **उप-क्षेत्रों की पहचान करें**: इस विषय के अंतर्गत महत्वपूर्ण प्रौद्योगिकी शाखाओं, उत्पाद श्रेणियों या व्यावसायिक दिशाओं का विश्लेषण करें और उनकी सूची बनाएं।
उदाहरण के लिए, "एआई" विषय के लिए, बड़े मॉडल, एजेंट, रोबोट, विज्ञान के लिए एआई और एआई अनुप्रयोग जैसे उपक्षेत्रों की पहचान की जानी चाहिए।
- **भौगोलिक वितरण की पहचान करें**: इस विषय के लिए विश्व स्तर पर भाग लेने वाले प्रमुख देशों और क्षेत्रों का विश्लेषण करें और उनकी सूची बनाएं।
उदाहरण के लिए, "चिप उद्योग" विषय के लिए, संयुक्त राज्य अमेरिका, चीन, जापान, दक्षिण कोरिया और यूरोप जैसे प्रमुख क्षेत्रों की पहचान की जानी चाहिए।
- **घटना प्रकारों की पहचान करें**: इस विषय के अंतर्गत सामान्य घटना प्रकारों के पूर्व-निर्धारित विकल्प उपलब्ध हैं, जैसे "उत्पाद लॉन्च", "तकनीकी सफलता", "वित्तपोषण और विलय एवं अधिग्रहण", "नीति विनियमन", "बाजार गतिशीलता", "कार्मिक परिवर्तन", आदि।
- **आउटपुट**: अगले खोज चरण को निर्देशित करने के लिए वर्तमान विषय के लिए एक बहु-आयामी खोज सूची।
3. **बहु-चरण खोज का डिज़ाइन और निष्पादन करें**:
- **उद्देश्य:** एक "बहुआयामी खोज सूची" के आधार पर, व्यापक कवरेज सुनिश्चित करने के लिए खोज प्रश्नों की एक श्रृंखला तैयार करें और उसे क्रियान्वित करें।
- **कार्रवाई**:
- `googleSearch` टूल का उपयोग करके विभिन्न दृष्टिकोणों से कम से कम 5-8 खोज क्वेरी तैयार करें, जिनमें विभिन्न आयामों से कीवर्ड को संयोजित किया गया हो।
- **व्यापक खोज**: मुख्य कीवर्ड का उपयोग करके व्यापक खोज (1-2 बार) करें।
- **खिलाड़ी ट्रैकिंग खोज**: पहचाने गए "प्रमुख खिलाड़ियों" के लिए लक्षित खोज (2-3 बार) करें।
- **उप-क्षेत्र खोज**: पहचाने गए "उप-क्षेत्र" पर एक विशिष्ट खोज (1-2 बार) करें।
- **क्षेत्रीय गतिशील खोज**: विभिन्न क्षेत्रीय दृष्टिकोणों (1-2 बार) की खोज के लिए विषयों को "भौगोलिक वितरण" के साथ संयोजित करें।
- `freshness` पैरामीटर सेट करने से जानकारी की समयबद्धता सुनिश्चित होती है (उदाहरण के लिए, `freshness="pm"` का अर्थ है पिछले महीने के भीतर की जानकारी)।
4. **सूचना फ़िल्टरिंग और निष्कर्षण**:
खोज परिणामों से वास्तविक "घटनाओं" (स्पष्ट समयसीमा वाले समाचार/घोषणाएं/प्रकाशन विज्ञप्तियां) की पहचान करें।
- केवल राय पर आधारित लेख, बाजार विश्लेषण रिपोर्ट, दोहराई गई जानकारी और अप्रासंगिक सामग्री को फ़िल्टर करें।
- प्रत्येक वैध इवेंट के लिए, मुख्य जानकारी निकालें: **दिनांक**, **इवेंट का शीर्षक**, **इवेंट का विवरण**, **श्रेणी टैग**, **स्रोत लिंक** और **मुख्य डेटा** (यदि कोई हो)।
5. **डेटा की तैयारी और छँटाई**:
- सभी घटनाओं को कालानुक्रमिक क्रम में व्यवस्थित किया गया है (डिफ़ॉल्ट रूप से नवीनतम से सबसे पुराने क्रम में, जो ब्रीफिंग की पढ़ने की आदतों के अनुरूप है)।
- दोहराव हटाना: यदि एक ही घटना पर कई स्रोत रिपोर्ट करते हैं, तो सबसे प्रामाणिक या व्यापक स्रोत का चयन करें और मुख्य जानकारी को मर्ज करें।
6. **व्यापक स्व-जांच और पूरक खोज:**
- **उद्देश्य:** प्रारंभिक डेटा संग्रह के बाद, किसी भी विसंगति की जांच करें और वस्तुनिष्ठता और व्यापकता सुनिश्चित करने के लिए जानकारी को पूरक करें।
- **कार्रवाई**:
- **खिलाड़ी पूर्वाग्रह जांच:** 1-2 "प्रमुख खिलाड़ियों" पर अत्यधिक ध्यान केंद्रित करने की जांच के लिए इवेंट सूची का विश्लेषण करें। यदि 50% से अधिक इवेंट एक ही कंपनी से संबंधित हैं, तो अन्य अनदेखे खिलाड़ियों की खोज के लिए अतिरिक्त प्रयास किए जाने चाहिए।
- **क्षेत्रीय पूर्वाग्रह की जाँच:** यह जाँचें कि क्या घटना केवल एक ही क्षेत्र को कवर करती है। यदि विषय वैश्विक है लेकिन परिणाम केवल अमेरिका का दृष्टिकोण दिखाते हैं, तो खोज में अन्य प्रमुख क्षेत्रों (जैसे चीन और यूरोप) की खोज भी शामिल करनी होगी।
- **प्रकार पूर्वाग्रह जाँच:** जाँचें कि क्या घटना का प्रकार बहुत ही सीमित है (उदाहरण के लिए, केवल वित्तपोषण समाचार)। यदि "तकनीकी सफलता" या "उत्पाद लॉन्च" जैसे महत्वपूर्ण प्रकार मौजूद नहीं हैं, तो अतिरिक्त खोज की जानी चाहिए।
- **आउटपुट**: घटनाओं की एक पूरक और संतुलित, अधिक व्यापक सूची।
**गुणवत्ता मानक**:
- 8-15 उच्च गुणवत्ता वाली, अत्यंत प्रासंगिक घटनाओं का संग्रह करें।
- आयोजन सूची प्रमुख प्रतिभागियों, भौगोलिक वितरण और आयोजन प्रकार के आधार पर समान रूप से वितरित है, जिसमें कोई महत्वपूर्ण पूर्वाग्रह नहीं है।
- प्रत्येक कार्यक्रम में कम से कम निम्नलिखित जानकारी शामिल होनी चाहिए: तिथि, शीर्षक, विवरण और स्रोत।
- सभी जानकारी विश्वसनीय स्रोतों (प्रामाणिक मीडिया, आधिकारिक घोषणाएं, उद्योग रिपोर्ट) से प्राप्त की गई है।
घटनाओं को कालानुक्रमिक क्रम के विपरीत क्रम में व्यवस्थित किया गया है (सबसे नई घटना पहले)।
शोध पूरा होने के बाद, उपयोगकर्ता से पूछें कि क्या वे संतुष्ट हैं। यदि वे संतुष्ट हैं, तो अगले चरण पर आगे बढ़ें; अन्यथा, उपयोगकर्ता के संतुष्ट होने तक सिस्टम में सुधार करते रहें।
### चरण 2: सूचना वास्तुकला का डिज़ाइन तैयार करना
**उद्देश्य:** किसी वेबपेज की विषयवस्तु पदानुक्रम और अंतःक्रिया तर्क की योजना बनाना।
**कार्रवाई**:
- पृष्ठ संरचना निर्धारित करें:
- **शीर्ष क्षेत्र**: शीर्षक (उदाहरण के लिए, "जनवरी 2026 में वैश्विक एआई की उपलब्धियां") + उपशीर्षक/समय सीमा
- **मुख्य क्षेत्र:** ऊर्ध्वाधर समयरेखा + इवेंट कार्ड
- **निचला भाग:** डेटा स्रोत की व्याख्या + अद्यतन समय
- डिजाइन टाइमलाइन लेआउट:
- इसमें लंबवत रूप से केंद्रित टाइमलाइन का उपयोग किया गया है, जिसमें तिथि नोड्स बाईं ओर और इवेंट कार्ड दाईं ओर प्रदर्शित होते हैं।
- वैकल्पिक रूप से, एक वैकल्पिक लेआउट का उपयोग किया जा सकता है (इवेंट कार्ड बाएं से दाएं बारी-बारी से प्रदर्शित होते हैं, जिससे अधिक गतिशील दृश्य प्रभाव उत्पन्न होता है)।
- इंटरैक्टिव सुविधाओं की योजना बनाएं:
- स्क्रॉल करते समय, टाइमलाइन नोड्स एक-एक करके रोशन हो जाते हैं (पैरालेक्स प्रभाव)।
- इवेंट कार्ड पर माउस ले जाने पर उसे हाइलाइट करें
पूरी जानकारी देखने के लिए कार्ड पर क्लिक करें (यदि सामग्री लंबी है)।
- वैकल्पिक: शीर्ष पर एक श्रेणी फ़िल्टर बटन जोड़ें (टैग के आधार पर इवेंट्स को फ़िल्टर करें)
- रिस्पॉन्सिव ब्रेकपॉइंट्स की पुष्टि करें: डेस्कटॉप (>1024px), टैबलेट (768-1024px), मोबाइल (<768px)
**गुणवत्ता मानक**:
- जानकारी को स्पष्ट रूप से संरचित किया गया है, जिससे उपयोगकर्ता प्रमुख घटनाओं को शीघ्रता से खोज सकते हैं।
- इसका इंटरैक्शन लॉजिक सहज है और इसे सीखने में कोई कठिनाई नहीं होती।
- बेजोड़ मोबाइल अनुभव
### चरण 3: वायर्ड मैगज़ीन के शैलीगत दिशानिर्देशों को परिभाषित करें
**उद्देश्य:** दृश्य डिजाइन के सभी विस्तृत मापदंडों को स्पष्ट रूप से परिभाषित करना और शैलीगत एकरूपता सुनिश्चित करना।
**कार्रवाई**:
- निम्नलिखित तत्वों को शामिल करते हुए एक संपूर्ण स्टाइल गाइड विकसित करें:
**रंग योजना**:
सादे पाठ
पृष्ठभूमि का रंग: स्पेस ब्लैक #0D0D0D
द्वितीयक पृष्ठभूमि: चारकोल ग्रे #1A1A1A (कार्ड की पृष्ठभूमि के लिए)
मुख्य पाठ का रंग: शुद्ध सफेद #FFFFFF
द्वितीयक पाठ रंग: सिल्वर-ग्रे #B0B0B0
एक्सेंट कलर 1: इलेक्ट्रिक ब्लू #00D9FF (टाइमलाइन, लिंक और हाइलाइट्स के लिए)
एक्सेंट रंग 2: नियॉन ग्रीन #39FF14 (महत्वपूर्ण लेबल के लिए)
एक्सेंट कलर 3: साइबर पिंक #FF006E (विशेष रूप से महत्वपूर्ण अवसरों के लिए)
बॉर्डर/विभाजक रेखा: गहरा धूसर #2A2A2A
```
**फ़ॉन्ट सिस्टम**:
सादे पाठ
शीर्षक का फ़ॉन्ट: इंटर ब्लैक / हेलवेटिका न्यू बोल्ड (बोल्ड, आधुनिक)
मुख्य पाठ का फ़ॉन्ट: इंटर रेगुलर / एसएफ प्रो टेक्स्ट (स्पष्ट और पढ़ने में आसान)
समय/डेटा फ़ॉन्ट: जेटब्रेन्स मोनो / कूरियर न्यू (मोनोस्पेस, तकनीक से प्रेरित)
```
**दृश्य तत्व**:
- टाइमलाइन: 2px चौड़ी एक ऊर्ध्वाधर रेखा, चमकीले नीले रंग की, जिसमें 12px के बिंदु नोड्स के रूप में हैं।
- इवेंट कार्ड:
- पृष्ठभूमि: चारकोल ग्रे #1A1A1A, 1px गहरे ग्रे बॉर्डर के साथ
- फ्लोटिंग प्रभाव: बॉर्डर इलेक्ट्रिक ब्लू हो जाता है, और कार्ड थोड़ा तैरता है (transform: translateY(-4px))।
- आंतरिक मार्जिन: 24px
- गोल कोने: 8px
- शैडो: 0 4px 20px rgba(0, 217, 255, 0.15)
- टैग शैली:
- छोटा कैप्सूल आकार, अर्ध-पारदर्शी पृष्ठभूमि, आकर्षक रंग में टेक्स्ट
उदाहरण के लिए, नियॉन ग्रीन का उपयोग "उत्पाद लॉन्च" के लिए किया जाता है, और साइबर पिंक का उपयोग "नीति विनियमन" के लिए किया जाता है।
- लिंक शैली:
- डिफ़ॉल्ट: इलेक्ट्रिक ब्लू, रेखांकित
- माउस को होवर करने पर: रंग अधिक चमकीला हो जाता है और अंडरलाइन मोटी हो जाती है।
**एनिमेशन प्रभाव**:
- पेज लोड होने पर: शीर्षक धीरे-धीरे दिखाई देता है + टाइमलाइन ऊपर से नीचे की ओर एनिमेटेड रूप में प्रदर्शित होती है (0.8 सेकंड)
स्क्रॉल करते समय: इवेंट कार्ड एक-एक करके धीरे-धीरे दिखाई देते हैं (स्टैगर प्रभाव, प्रत्येक 0.1 सेकंड के विलंब के साथ)।
- माउस को कार्ड पर ले जाने पर: कार्ड ऊपर उठता है + परछाई फैलती है (परिवर्तन: 0.3 सेकंड)
### चरण 4: वेबपेज सामग्री उत्पन्न करें
**उद्देश्य:** वायर्ड शैली के अनुरूप एक इंटरैक्टिव प्रस्तुति पृष्ठ बनाने के लिए generateWebpage टूल का उपयोग करना।
**कार्रवाई**:
- चरण 1 में निकाली गई संरचित जानकारी को चरण 3 में दिए गए शैलीगत दिशानिर्देशों के साथ एकीकृत करके स्पष्ट निर्देश तैयार करें।
- generateWebpage टूल को कॉल करें और उसमें निम्नलिखित पैरामीटर पास करें:
- `निर्देश`: पृष्ठ की आवश्यकताओं का विस्तृत वर्णन करता है, जिसमें निम्नलिखित शामिल हैं:
- पृष्ठ का शीर्षक और उपशीर्षक
- टाइमलाइन लेआउट (ऊर्ध्वाधर रूप से केंद्रित या आगे-पीछे)
- प्रत्येक इवेंट के लिए डेटा फ़ील्ड (दिनांक, शीर्षक, विवरण, टैग, लिंक)
- वायर्ड के संपूर्ण स्टाइल दिशानिर्देश (रंग, टाइपोग्राफी, दृश्य तत्व, एनीमेशन)
- अंतःक्रिया संबंधी आवश्यकताएँ (फ्लोटिंग प्रभाव, स्क्रॉलिंग एनीमेशन, वैकल्पिक फ़िल्टरिंग फ़ंक्शन)
- प्रतिक्रियाशील आवश्यकताएँ
- `references`: यदि उपयोगकर्ता `@references` प्रदान करता है, तो इसे डेटा स्रोत के रूप में पास करें।
- सुनिश्चित करें कि निर्देशों में स्पष्ट रूप से निम्नलिखित बातें लिखी हों:
- "वायर्ड पत्रिका शैली का उपयोग करते हुए: गहरा बैकग्राउंड (#0D0D0D), इलेक्ट्रिक ब्लू एक्सेंट कलर (#00D9FF), बोल्ड इंटर ब्लैक हेडिंग फॉन्ट"
- टाइमलाइन में वर्टिकल लेआउट का उपयोग किया गया है, जिसमें तारीख वाले नोड्स बाईं ओर और इवेंट कार्ड दाईं ओर हैं।
प्रत्येक इवेंट कार्ड में शामिल हैं: तिथि, शीर्षक, विवरण, श्रेणी टैग और स्रोत लिंक।
- "जब कार्ड पर माउस ले जाया जाता है, तो उसकी किनारी चमकीले नीले रंग की हो जाती है और थोड़ी ऊपर उठ जाती है।"
- "पेज लोड होने पर टाइमलाइन ऊपर से नीचे की ओर खींची जाती है, और इवेंट कार्ड एक-एक करके धीरे-धीरे दिखाई देने लगते हैं।"
**गुणवत्ता मानक**:
- तैयार किया गया वेबपेज वायर्ड पत्रिका की दृश्य शैली से पूरी तरह मेल खाता है।
- सभी इवेंट की जानकारी सटीक है और स्रोत लिंक क्लिक करने योग्य हैं।
- सहज अंतःक्रिया और सहज एनीमेशन।
## शैली और प्रस्तुति
### वायर्ड मैगज़ीन के शैलीगत दिशानिर्देश
**डिजाइन दर्शन**:
वायर्ड पत्रिका की दृश्य शैली भविष्यवाद और सरलता के संयोजन पर ज़ोर देती है। यह स्पष्ट पठनीयता बनाए रखते हुए तकनीकी अनुभव प्रदान करने के लिए चटख रंगों और ज्यामितीय आकृतियों का उपयोग करती है। इसकी प्रमुख विशेषताओं में उच्च कंट्रास्ट और सशक्त दृश्य पदानुक्रम शामिल हैं—महत्वपूर्ण जानकारी को एक नज़र में ही ध्यान आकर्षित करना चाहिए।
**रंगों के उपयोग के सिद्धांत:**
**पृष्ठभूमि:** गहरे रंग पेशेवर और प्रभावशाली माहौल बनाते हैं; शुद्ध काले रंग (#000000) से बचें, थोड़ा धूसर गहरे रंग (#0D0D0D) का उपयोग करें।
- **एक्सेंट कलर्स**: नियॉन रंगों (नीला, हरा, गुलाबी) का उपयोग दृश्य केंद्रबिंदु के रूप में करें, लेकिन इनका अत्यधिक उपयोग न करें; संयम बनाए रखें।
- **पाठ:** पठनीयता सुनिश्चित करने के लिए मुख्य पाठ के लिए शुद्ध सफेद रंग और द्वितीयक पाठ के लिए सिल्वर-ग्रे रंग का प्रयोग करें।
- **पदानुक्रम**: सूचना के स्तरों को अलग करने के लिए रंग का उपयोग करें (शीर्षक > मुख्य पाठ > पादलेख)
**लेआउट सिद्धांत**:
- **फ़ॉन्ट तुलना**: शीर्षकों में बोल्ड सैन्स-सेरिफ़ फ़ॉन्ट (इंटर ब्लैक) का उपयोग किया गया है, बॉडी टेक्स्ट में सामान्य फ़ॉन्ट वज़न (इंटर रेगुलर) का उपयोग किया गया है, और डेटा में मोनोस्पेस फ़ॉन्ट (जेटब्रेन्स मोनो) का उपयोग किया गया है।
- **फ़ॉन्ट आकार स्तर:** शीर्षक 48-64px, उपशीर्षक 24-32px, मुख्य पाठ 16-18px, फ़ुटनोट 12-14px
- **पंक्ति अंतराल**: पढ़ने में आसानी सुनिश्चित करने के लिए मुख्य पाठ के लिए 1.6-1.8 पंक्ति अंतराल।
- **संरेखण**: शीर्षक केंद्र में या बाएँ संरेखित, मुख्य पाठ बाएँ संरेखित, डेटा दाएँ संरेखित।
**लेआउट सिद्धांत**:
- **ग्रिड सिस्टम**: 12-कॉलम ग्रिड का उपयोग करता है, लेकिन अपरंपरागत दृष्टिकोणों (जैसे टाइमलाइन ऑफसेट और कार्ड इंटरलीविंग) की अनुमति देता है।
- **व्हाइट स्पेस**: पर्याप्त व्हाइट स्पेस से खुलापन का एहसास होता है; कार्डों के बीच की दूरी कम से कम 40px होनी चाहिए।
- **दृश्य केंद्र बिंदु:** आंखों के प्रवाह को निर्देशित करने के लिए आकार, रंग और स्थान का उपयोग करें (ऊपर से नीचे, बाएं से दाएं)।
**अंतःक्रियात्मक सिद्धांत**:
- **तत्काल प्रतिक्रिया:** होवर करने और क्लिक करने पर स्पष्ट दृश्य प्रतिक्रिया (रंग परिवर्तन, विस्थापन, छाया) मिलनी चाहिए।
- **प्राकृतिक एनीमेशन:** 0.2-0.4 सेकंड की अवधि के साथ ईज़-आउट ईज़िंग फ़ंक्शन का उपयोग करता है।
- **प्रगतिशील संवर्धन**: मुख्य सामग्री को जावास्क्रिप्ट के बिना प्रदर्शित किया जा सकता है; अंतःक्रियात्मकता तो सोने पर सुहागा है।
**संदर्भ उदाहरण**:
- वायर्ड की आधिकारिक वेबसाइट के लेख पृष्ठ का लेआउट
- स्ट्राइप की आधिकारिक वेबसाइट का उत्पाद पृष्ठ (डार्क मोड में)
- एप्पल के उत्पाद लॉन्च का पेज (टाइमलाइन सेक्शन)
### चरण 5: सत्यापन और अनुकूलन
**उद्देश्य:** यह जांचना कि निर्मित वेबपेज आवश्यकताओं को पूरा करता है या नहीं और यदि आवश्यक हो तो उसमें समायोजन करना।
**कार्रवाई**:
- जनरेट किए गए वेबपेज का पूर्वावलोकन करें और प्रत्येक आइटम की जांच करें:
- **दृश्य शैली**: क्या पृष्ठभूमि का रंग, मुख्य रंग और फ़ॉन्ट वायर्ड की शैली के अनुरूप हैं?
- **जानकारी की पूर्णता**: क्या प्रत्येक घटना की तिथि, शीर्षक, विवरण और स्रोत पूर्ण हैं?
- **इंटरैक्टिव अनुभव**: क्या फ्लोटिंग इफ़ेक्ट और स्क्रॉलिंग एनिमेशन ठीक से काम करते हैं?
- **रिस्पॉन्सिव लेआउट:** क्या यह अलग-अलग डिवाइस साइज़ पर सही ढंग से प्रदर्शित होता है?
- **लिंक की उपलब्धता:** क्या स्रोत लिंक पर क्लिक करने से सही तरीके से रीडायरेक्ट होता है?
- यदि कोई समस्या पाई जाती है, तो आवश्यक समायोजन संबंधी विशिष्ट विवरण दर्ज करें:
- उदाहरण के लिए: "टाइमलाइन का रंग पर्याप्त चमकीला नहीं है और इसे #00D9FF में समायोजित करने की आवश्यकता है"।
- उदाहरण के लिए: "मोबाइल डिवाइस पर कार्ड का आंतरिक मार्जिन बहुत बड़ा है और इसे घटाकर 16px करने की आवश्यकता है।"
- यदि समायोजन की आवश्यकता हो, तो संपादन के लिए `webpage_id` पैरामीटर पास करते हुए generateWebpage टूल को फिर से कॉल करें।
**गुणवत्ता मानक**:
- विज़ुअल स्टाइल वायर्ड पत्रिका के सौंदर्यशास्त्र के साथ पूरी तरह से मेल खाता है।
- सभी इंटरैक्टिव फ़ंक्शन ठीक से काम कर रहे हैं।
- लेआउट में कोई स्पष्ट त्रुटि या अधूरी जानकारी नहीं है।
### गुणवत्ता मानक
- **पूर्णता**: प्रत्येक घटना में तिथि, शीर्षक, विवरण और स्रोत शामिल हैं।
- **सटीकता**: सभी जानकारी मूल सामग्री के अनुरूप है, और लिंक सुलभ हैं।
- **पता लगाने की क्षमता:** प्रत्येक घटना का एक स्पष्ट रूप से पहचाना गया स्रोत होता है।
- **दृश्य एकरूपता:** सभी तत्व वायर्ड के शैली दिशानिर्देशों का सख्ती से पालन करते हैं।
- **सुचारू अंतःक्रिया:** एनिमेशन सहज हैं और इनकी प्रतिक्रिया का समय तेज़ है (<100 मिलीसेकंड)।
- **पहुँचयोग्यता:** टेक्स्ट का कंट्रास्ट WCAG AA मानकों को पूरा करता है और मोबाइल उपकरणों पर उपयोग करने योग्य है।
विवरण
उपयोगकर्ता द्वारा प्रदान की गई समय-संवेदनशील शोध जानकारी (जैसे मासिक AI प्रमुख घटनाओं) को वायर्ड मैगज़ीन शैली की इंटरैक्टिव दृश्य संक्षिप्त वेबपेज में बदलें।
अपना अगला पसंदीदा कौशल खोजें
शोध, निर्माण और रोज़मर्रा के काम के लिए और अधिक चयनित AI कौशल खोजें।