HTML5 और css3 प्रौद्योगिकियों पर आधारित पायलट परियोजना - DI गैलरी

ऐसा लगता है कि यह मॉनीटर को स्थानांतरित करने के लायक है, और यह घन तीन आयामी अंतरिक्ष में अपना जीवन सही तरीके से जीएगा।

designfire.ru

विपक्ष भी! उन्होंने अपने दोस्तों को गैलरी दिखाई - इसलिए मेरे कामों को देखने के बजाय (और लेखक की प्रशंसा करते हुए!)), उन्होंने गैलरी को खुद ही संभाल लिया, अपने मोबाइल ब्लॉकों से खेल रहे थे!

बोगदान मायलोव

क्या आपको 90 के दशक की स्थिर तस्वीरें, समतल चित्र और मानक समाधान पसंद हैं? यह स्क्रिप्ट आपके लिए नहीं है!

designfire.ru

डि गैलरी - शानदार और कॉम्पैक्ट, मैचों के एक बॉक्स की तरह। सरल सब कुछ सरल है!

getincss.ru


गैलरी प्रदर्शन: http://photo.voodee.ru/
स्रोत कोड: https://github.com/voodee/di_gallery/

यह जानने की कोशिश कर रहा है कि एक कुर्सी पर बैठने के लिए चार चूजों को कैसे प्राप्त किया जाए;
अरे हाँ, कुर्सी को उल्टा कर दो। क्रोक किया गया

कई ब्राउज़रों के डेवलपर विज्ञापन को एक नए स्तर तक पहुंचने से रोकते हैं और उपयोगकर्ता से कोई अनुमति प्राप्त किए बिना ब्राउज़र स्क्रीन को पूरी स्क्रीन में खोलने की क्षमता प्रदान नहीं करते हैं। उनकी गलती के कारण, एक को CROOKED I विचारों के समान जीनियस समाधान का आविष्कार करना है। ऐसे समाधानों में से एक साइट आगंतुक को एक मोहक और सुरुचिपूर्ण बटन के साथ मिलना है, जिस चिकनी एनीमेशन से आप अनंत काल के बारे में सोचते हैं।

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

मुख्य परियोजना टेम्पलेट में निम्नलिखित दस्तावेज़ लेआउट संरचना है:

1. < div id = 'Main' >
2. <अनुभाग आईडी = 'एरियाक्यूब' >
3. <लेख> < / लेख>
4. <लेख id = 'CubeAlbum' > < / लेख>
5. <लेख id = 'CubeAbout' > < / लेख>
6. < / अनुभाग>
7. < / div >

और इसी कैस्केडिंग शैली पत्रक:

1. # मेन {
2. स्थिति : निरपेक्ष ;
3. शीर्ष : 50 % ; बायां : 50 % ;
4. मार्जिन : -300px 0 0 -300px ;
5. ऊंचाई : 600 पीएक्स ; चौड़ाई : 600px ;
7. -webkit- परिप्रेक्ष्य : 1200px ;
8. -वेबकिट-परिप्रेक्ष्य-मूल : 50 % 50 % ;
9. -वेबकैट-संक्रमण : सभी 500ms रैखिक ;
11. -मोज़-परिप्रेक्ष्य : 1200 पीएक्स ;
12. -मोज़-परिप्रेक्ष्य-उत्पत्ति : 50 % 50 % ;
13. -मोज़-संक्रमण : सभी 500ms रैखिक ;
15. -khtml- परिप्रेक्ष्य : 1200px ;
16. -khtml- परिप्रेक्ष्य-उत्पत्ति : 50 % 50 % ;
17. -khtml- संक्रमण : सभी 500ms रैखिक ;
19. -ओ-परिप्रेक्ष्य : 1200 पीएक्स ;
20. -ओ-परिप्रेक्ष्य-उत्पत्ति : 50 % 50 % ;
21. -ओ-संक्रमण : सभी 500ms रैखिक ;
23. -ms-परिप्रेक्ष्य : 1200px ;
24. -ms-परिप्रेक्ष्य-उत्पत्ति : 50 % 50 % ;
25. -ms- संक्रमण : सभी 500ms रैखिक ;
27. परिप्रेक्ष्य : 1200 पीएक्स ;
28. परिप्रेक्ष्य-उत्पत्ति : 50 % 50 % ;
29. संक्रमण : सभी 500ms रैखिक ;
30. }
31. #AreaCube {
32. ...
33. संक्रमण : परिवर्तन 500ms रैखिक ;
34. परिवर्तन-शैली : संरक्षित-डी ;
35. }
36. #AreaCube > लेख {
37. ...
38. परिवर्तन-शैली : संरक्षित-डी ;
39. }
40. #AreaCube > लेख : पहला बच्चा {
41. ...
42. रूपांतर : TranslZ ( 300px ) ;
43. }
44. #AreaCube > लेख : nth- बच्चा ( 2 ) {
45. ...
46. रूपांतर : रोटेटी ( 90 डीजी ) ट्रांसलजेड ( 300 पीएक्स ) ;
47. }
48. #AreaCube > लेख : nth- बच्चा ( 3 ) {
49. ...
50. रूपांतर : रोटेटी ( -90 डीजी ) ट्रांसलेज़ ( 300 पीएक्स ) ;
51. }

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

गैलरी खुद ही दर्शक से अलग दूरी पर तस्वीरों के स्थान का भ्रम पैदा करती है। Google Chrome ब्राउज़र के खुश उपयोगकर्ता समय के साथ इस दूरी में एक गतिशील परिवर्तन का निरीक्षण कर सकते हैं। निकटता-घटना प्लगइन के लिए धन्यवाद, जब कर्सर वांछित फोटो से संपर्क करता है, तो यह धीरे-धीरे सामने आता है, पारदर्शिता से छुटकारा पाता है और आकार में थोड़ा बढ़ जाता है, यह प्रभाव सबक के आधार पर विकसित होता है। निकटता के प्रभाव को jQuery के साथ वॉल्यूमेट्रिक परिवर्तन के साथ जोड़ा जाता है।

एकल फोटो को देखते समय, Manoela Ilic द्वारा jQuery थंबनेल scroller प्लगइन का उपयोग करके विकसित स्क्रॉलिंग मोड को डिफ़ॉल्ट रूप से चालू किया जाता है । एक स्टैटिक मोड भी है। इसके अलावा, प्रत्येक मोड के लिए, छवियों को एक रिज़ॉल्यूशन के साथ लोड किया जाता है जो ब्राउज़र को अपने स्वयं के माध्यम से छवि का आकार बदलने की अनुमति नहीं देता है, जो कि अधिकतम प्रदर्शन गुणवत्ता, तृतीय-पक्ष सॉफ़्टवेयर पर न्यूनतम निर्भरता और, सामान्य रूप से, एक कार्नेशन के साथ एक एंटीक सुनिश्चित करता है! Neteye गतिविधि सूचक आपको छवियों को डाउनलोड करते समय ऊब जाने में मदद करेगा। सुरक्षा कारणों के कारण, अंतिम उपयोगकर्ता को न केवल छवि तक सीधी पहुंच दी जाती है, बल्कि छवि के स्थान के बारे में भी जानकारी दी जाती है, इसलिए सार्वजनिक जोड़-तोड़ के दौरान सर्वर पर फ़ाइल का नाम php-cypher लाइब्रेरी का उपयोग करके एन्क्रिप्ट किया गया है। चूंकि टिमटंब लाइब्रेरी का उपयोग करके छवि जोड़तोड़ किया जाता है, उदाहरण के लिए, फोटो के लिए विभिन्न फ़िल्टर लागू करने की संभावना है। और हां, एंकरों के लिए धन्यवाद, आप हमेशा अपने पसंदीदा फोटो दोस्तों के लिए एक लिंक फेंक सकते हैं।

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

ऊर्जा की लागत को कम करने के लिए, परियोजना के विकास के दौरान शरीर के आंदोलनों की संख्या को कम करके, सबसे लोकप्रिय (इसके डेवलपर्स द्वारा किए गए शोध के अनुसार) फ्रंटेंड टेम्पलेट का उपयोग किया गया था - एचटीएमएल 5 बॉयलरप्लेट । इस HTML / CSS / JS टेम्पलेट में विभिन्न स्क्रीनों के लिए अनुकूलित पृष्ठ संस्करण शामिल हैं, जो Google Analytics कोड, normalize.css और कैस्केडिंग स्टाइल शीट के अन्य सहायकों के साथ-साथ JQuery और Modernizr पुस्तकालयों के लिए अनुकूलित हैं। इस टेम्पलेट को Google , Microsoft और बराक ओबामा ने सफलतापूर्वक उपयोग किया है।

आप ओबामा की तरह कीड़े हैं - आप एक झोपड़ी में रहते हैं। ओक्स्ज्स्मीरन

आवेदन के सर्वर पक्ष के लिए, एक अल्पज्ञात रूपरेखा जिसे मामूली कहा जाता है, को चुना गया था। यह सॉफ्टवेयर क्लासिक रूप में (H) MVC पैटर्न को लागू करता है:

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

• नियंत्रक (नियंत्रकों के लिए जगह)
  • नियंत्रक। Php (डिफ़ॉल्ट नियंत्रक)
• मॉडल (परियोजना का दिल)
  • कोर (कक्षाओं और पुस्तकालयों के लिए जगह)
  • डेटा (सेटिंग्स फ़ाइलें)
  • शामिल हैं (तीसरे पक्ष के पुस्तकालयों के लिए जगह)
  • index.php (उपयोगकर्ता अनुरोधों को हैंडल करने वाली फ़ाइल)
• दृश्य (प्रस्तुति के लिए टेम्पलेट्स का संग्रहण स्थान)
• .htaccess (डिस्पैचर के रूप में कार्य करता है)

इस सॉफ्टवेयर टूल की एक सुविधाजनक विशेषता नियंत्रकों को बनाने की सादगी है, उदाहरण के लिए, आप निम्न सामग्री के साथ एक फ़ाइल "echoController.php" बना सकते हैं:

1. <? php
2. वर्ग echoController आधार बढ़ाता है {
3. फ़ंक्शन इंडेक्स ( ) {
4. गूंज 'हैलो वर्ल्ड!' ;
5. }
7. फ़ंक्शन क्रिया ( ) {
8. गूंज 'मैं' की कार्रवाई ! ';
9. }
10. }
11. ?>

फिर इस फाइल को "नियंत्रक" फ़ोल्डर में छोड़ दें और आप किए गए काम का आनंद ले सकते हैं। अब यदि आप site.com/echo/ पर जाते हैं, तो आपको "Hello World!" संदेश दिखाई देगा, और यदि आप site.com/echo/action/ पर जाते हैं, तो आप "I am action!" देख सकते हैं।

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

1. <? php
2. वर्ग echoController आधार बढ़ाता है {
3. फ़ंक्शन इंडेक्स ( ) {
4. $ यह ( 'स्मार्टी' ) -> प्रदर्शन ( 'index.tpl' ) ;
5. // या तो
6. $ यह -> स्मार्टी -> प्रदर्शन ( 'index.tpl' ) ;
7. // अच्छी तरह से या तो
8. कोर :: उदाहरण ( ) -> स्मार्टी -> प्रदर्शन ( 'index.tpl' ) ;
9. }
10. }
11. ?>

तीन लाइनों में से कोई भी "index.tpl" टेम्पलेट "दृश्य" फ़ोल्डर में प्रदर्शित करेगा। दूसरे शब्दों में, यदि भविष्य में प्यासे तीर्थयात्रियों में इस प्रणाली की कार्यक्षमता का विस्तार करने की एक अथक इच्छा है, तो यह एक समस्याजनक कार्य नहीं होना चाहिए।



संपूर्ण नियंत्रण कक्ष की तरह, नियंत्रण कक्ष लॉगिन फ़ॉर्म को कैस्केडिंग मेट्रो यूआई सीएसएस शैली पत्रक के सेट का उपयोग करके एक न्यूनतम शैली में डिज़ाइन किया गया है। पृष्ठ के शीर्ष पर गैलरी में वापस जाने के लिए एक बटन और ग्रीटिंग के साथ एक शिलालेख है।

यदि अचानक उपयोगकर्ता दुश्मन के शिविर में है, जहां प्रत्येक होम्यनकुलस दुखी व्यक्ति के कंधे पर अपनी निगाह फेंकने के लिए कांपते हाथों से प्रयास करता है, तो निश्चित रूप से यह समझदारी होगी कि पासवर्ड को सार्वजनिक न करें। लेकिन अगर कोई उपयोगकर्ता ग्रीनहाउस में रहते हुए नियंत्रण कक्ष में घुसने की कोशिश करता है, तो उसकी मां और दादी द्वारा सावधानीपूर्वक पहरा दिया जाता है, तो यह मानना ​​तर्कसंगत होगा कि प्रवेश किए गए पासवर्ड से तारों की जंजीरों को हटाना अधिक सुविधाजनक है। दर्ज किए गए वर्णों की दृश्यता को स्विच करने का कार्य एक सहायक द्वारा किया जाता है जो उस समय प्रकट होता है जब पासवर्ड इनपुट फ़ील्ड फोकस को पकड़ता है।

फ़ोन नंबर इनपुट फ़ील्ड में सहायक दर्ज किए गए डेटा को हटा देता है।

दर्ज की गई संख्या का सत्यापन फोनकोड लाइब्रेरी का उपयोग करके किया जाता है ताकि देश कोड द्वारा उपयोगकर्ताओं को फ़िल्टर करना संभव हो। डिफ़ॉल्ट रूप से, निम्न देश कोड वाले फोन नंबर स्वीकार किए जाते हैं: 7, 375, 380। आप चौथी पंक्ति में आवश्यक कोड जोड़कर फ़ाइल "मॉडल / कोर / class.user.php" को संपादित करके इस सीमा का विस्तार कर सकते हैं।

उन लोगों के लिए जो अपने डेटा को दर्ज करते समय तीन बार गलती करने में सक्षम हैं, परियोजना के लिए एक अतिरिक्त अवसर खुलता है, अर्थात् मानवता सत्यापन प्रतीकों का इनपुट।


मानवता की डिग्री अद्भुत स्क्रिप्ट di_captcha को निर्धारित करने में मदद करती है , जिसका विवरण हैम्ब्रिज संसाधन पर प्रकाशित किया गया था।

नियंत्रण कक्ष में सफलतापूर्वक प्रवेश करने के तुरंत बाद, सभी दीर्घाओं की एक सूची दिखाई देती है और एक नया निर्माण करने की क्षमता होती है।

दीर्घाओं के आउटपुट के क्रम को बदलने के लिए, लाइन को पकड़ने के लिए "माउस" मैनिपुलेटर का उपयोग करना आवश्यक है, इसे वांछित स्थिति में खींचें और इसे अपने स्वयं के उपकरणों पर छोड़ दें।

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

अपने हाथों को कुतिया के नीचे रखो, मैं तुम्हें गोली नहीं चला रहा हूं
मैं तुम्हें इस गोली के लिए खींच रहा हूँ, और इसे तुम्हारे माध्यम से डाल रहा हूँ। एमिनेम

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

यदि अचानक सभी पाठ प्रदर्शित करने के लिए विवरण के साथ घन के किनारे पर पर्याप्त जगह नहीं है, तो एक स्क्रॉलबार दिखाई देता है, जिसे jQuery के ऊर्ध्वाधर scroller प्लगइन का उपयोग करके लागू किया गया है। वही गैलरी सूची के साथ चेहरे के लिए जाता है।

गैर-मानक प्रतिपादन के कारण, पुराने ग्राफिक्स कार्ड वाले कंप्यूटर धीमे हैं। यह तथ्य, इस तथ्य के साथ कि सभी ब्राउज़र पूरी तरह से और सही ढंग से तीसरे स्तर के कैस्केडिंग स्टाइल शीट की क्षमताओं का समर्थन नहीं करते हैं, प्रोजेक्ट के मोबाइल संस्करण को बनाते समय मौलिक बन गए।

गैलरी प्रदर्शन: http://photo.voodee.ru/
नियंत्रण कक्ष डेमो: ursite.com/log/
स्रोत कोड: https://github.com/voodee/di_gallery/
यह कार्य क्रिएटिव कॉमन्स एट्रिब्यूशन-शेयरएलाइक 3.0 अनपोर्टेड लाइसेंस के तहत लाइसेंस प्राप्त है