एक उदाहरण का उपयोग करके पॉकेट पीसी के लिए लेआउट का अनुभव

बहुत समय पहले नहीं, मैंने "मोबाइल" लोगों को एकजुट करने, मंच पर संवाद करने, हबरबोटनीह ब्लॉग्स पर विचार बदलने आदि में मदद करने के लिए डिज़ाइन किया गया एक छोटा प्रोजेक्ट लॉन्च किया। हालांकि, जैसा कि टिप्पणियों में सही ढंग से नोट किया गया था, परियोजना माना जाता है "मोबाइल", और मोबाइल उपकरणों से यह वास्तव में चमकदार लगता है, वैध एक्सएचटीएमएल लेआउट के बावजूद, आदि। धिक्कार है, मैंने सोचा, मेरे FS loox n560 को चालू किया और पीडीए संस्करण के लिए टेम्पलेट्स को धीरे-धीरे फिर से लिखना शुरू कर दिया।
सबसे पहले, मैंने सोचा कि मैं "हैंडहेल्ड.केएस" कनेक्ट करके और पीडीए-उन्मुख शैलियों को लिखकर प्राप्त कर सकता हूं, जैसा कि मैं आमतौर पर "मुद्रित" संस्करणों के लिए करता हूं। लेकिन जल्दी से मुझे एहसास हुआ कि सीएसएस का उपयोग करके सभी समस्याओं को हल नहीं किया जा सकता है। इसके अलावा, समान "मुद्रित" पृष्ठों के निर्माण का सिद्धांत आमतौर पर नीचे आता है: "यह छिपा हुआ है, यह छिपा हुआ है, इसे यहां स्थानांतरित किया गया है, यह वहां है, और यह भी छिपा हुआ है।" फिर भी, हम मोबाइल उपकरणों के साथ काम कर रहे हैं और अनावश्यक ट्रैफ़िक लोड कर रहे हैं ताकि अंत में यह प्रदर्शित न हो कि यह बेवकूफ़ है ... नतीजतन, मैं इस निष्कर्ष पर पहुंचा हूं कि आपको न केवल सीएसएस शैलियों को फिर से लिखना चाहिए, बल्कि टेम्पलेट्स को फिर से व्यवस्थित करना चाहिए। अभ्यास करने के लिए एक छोटी और सरल परियोजना के साथ शुरुआत की ...
बस मेरी एक अन्य परियोजना के टूडू शीट में, लाइन "पीडीए संस्करण" लंबे समय से धूल इकट्ठा कर रहा है, परियोजना बहुत लोकप्रिय नहीं है, लेकिन कम या ज्यादा ज्ञात है। यह सिर्फ सरल और अपेक्षाकृत छोटा था, और मैंने इसके साथ शुरुआत की। जो लोग नहीं जानते हैं, उनके लिए basher.ru विभिन्न प्रकारों के उद्धरणों का एक समुच्चय है + उद्धरणों का अपना आधार है। हाल ही में, वह अजीब चीप स्टेटस भी इकट्ठा करता है। कुछ पाठ-हास्य पोर्टल।
मेरे हाथों में मेरे पास एक Fujitsu-Siemens LOOX N560 था, जिसमें 640x480 रिज़ॉल्यूशन, WM 5.0 मानक IE मोबाइल के साथ था। एक शर्त लिखी:

"(इस्सेट ($ _ SERVER ['HTTP_UA_OS']) && preg_match ('/ windows ce / i', $ _SERVER ['HTTP_UA_OS']] && preg_match ('/ windows ce / i', $ _SERVER ['HTTP_USER_AGENT')] ) || preg_match ('/ iphone / i', $ _SERVER ['HTTP_USER_AGENT')] ""

पॉकेट टेम्प्लेट के लिए और एक नृत्य के लिए गया ... परिणामस्वरूप, हमें कुछ इस तरह मिला:

तो, चलिए शुरू करते हैं ... पोर्टेबल डिवाइसेस का मुख्य लाभ डेवलपर्स के लिए भी एक बड़ा नुकसान है =) छोटी स्क्रीन कई परिचित तकनीकों और लेआउट शैलियों को तोड़ती है। उदाहरण के लिए, डीआईजी-जैसे मेनू, जिसे बनाने में कई दिन लग गए, पीडीए संस्करण में केवल 2 चयनों की तरह दिखता है = (यहां तक ​​कि एक शर्म की बात है। लेकिन किसी भी साइट के लगभग सभी नेविगेशन अंततः चयन करने के लिए परिवर्तित हो जाएंगे। लेकिन दूसरी तरफ, मोबाइल उपकरणों पर। यह वास्तव में सुविधाजनक है =)))
और आप "कॉलम" डिज़ाइन के बारे में लगभग तुरंत भूल सकते हैं। यहां केवल एक-स्तंभ है, 2 या 3-स्तंभ एक की कल्पना करना मुश्किल है और यह सामान्य है। हालांकि वास्तव में, यहां सब कुछ थोड़ा सरल है जितना कि यह लग सकता है। उदाहरण के लिए, मेरे मामले में, यह बदलने के लिए नीचे आया:
#content{
width:80%;
}
#right{
width:20%;
}
पर:
#content{
width:100%;
}
#right{
width:100%;
margin-top:10px;
}
या ऐसा कुछ। हालांकि, ज़ाहिर है, मैंने पॉकेट टेम्पलेट के लिए सभी मेनू को काट दिया। अधिक बार वे बस ब्राउज़र में एक शून्य पर कब्जा कर लेते हैं, लेकिन एक जेब के साथ रास्ते में मिलता है। जैसा कि मैंने ऊपर कहा था, हम उन्हें प्रदर्शन का उपयोग नहीं करने के लिए हटा देते हैं: कोई नहीं ;, लेकिन शारीरिक रूप से उन्हें टेम्पलेट से काट दिया।
यह एक सुखद आश्चर्य था कि इस पर्चे को लगभग बिना किसी लेआउट या शैलियों के स्पर्श के देखा जा सकता है:

पोकेड - यहां तक ​​कि काम करता है। अगला कदम था जेएस ...
जेएस मुख्य नुकसान के रूप में निकला। उदाहरण के लिए, मेरे सिस्टम पर, जो मैंने ऊपर वर्णित किया है, मैं तत्व के माता-पिता, बच्चों को प्राप्त कर सकता हूं, शैलियों तक पहुंच हो सकती है, एक ही विशेषता "आईडी" है, लेकिन क्लासनेम के लिए नहीं = (और पूरी जेएस बैशर पर) पढ़ने / असाइनमेंट पर आधारित है यह विशेषता। मोबाइल IE में, यहां तक ​​कि एक XmlHttp ऑब्जेक्ट भी मौजूद है, लेकिन className नहीं है। मोबाइल गधा डेवलपर्स के ब्लॉग में, मैंने कुछ पदों में "गर्व" संदर्भ पाया, जैसे: "नए तरीकों को जेएस में जोड़ा गया था", जिसके बीच क्लासनेम था। लेकिन जाहिरा तौर पर, मेरा सिस्टम बहुत पुराना है। इस तरह, यह पीडीए पर अक्ष को अद्यतन करने के लिए पर्याप्त है, लेकिन अन्य पर मुझे नहीं पता कि यह कैसे करना है, और क्यों, और मेरे जैसे लोग, मुझे उन सभी को ओएस को अपडेट करने के लिए मजबूर करना होगा जब वे साइट पर जाते हैं?
दुर्भाग्य से, मैंने उपरोक्त कारणों से, फिलहाल AJAX पर मतदान लागू नहीं किया था - पर्याप्त समय नहीं था। शायद सप्ताह में काम के बाद समय होगा और मैं इसे खत्म कर दूंगा, लेकिन फिलहाल, सेवा की "गतिशीलता" वास्तव में समाप्त हो गई है। उन्हें एक मोबाइल लेआउट मिला, उन्होंने अपनी सारी कार्यक्षमता बरकरार रखी, लेकिन मुझे नहीं लगता कि कई लोग ऐसे हैं जो उद्धरण के लिए "वोट" देने के लिए तैयार हैं और पृष्ठ को फिर से लोड करने के लिए हर बार इंतजार करते हैं (=

आदर्श रूप से, निश्चित रूप से, न केवल AJAX वोटिंग बैलट बनाने के लिए, बल्कि कनेक्शन में संभावित रुकावटों के लिए भी प्रदान करते हैं। एक आदमी बस या मिनीबस में सवार है, उद्धरणों के लिए चम्मच से मतदान कर रहा है, मेट्रो के नीचे जा रहा है, पृष्ठ को खींचना और वोट करना जारी रखता है, लेकिन कनेक्शन धमाकेदार और चला गया है ... अब तक, यह केवल AJAX अनुरोध की स्थिति की जांच करने और उसके समय पर कुकी में व्यक्ति की आवाज लिखने के लिए ध्यान में आता है। इन कुकीज़ को पढ़ने के लिए किसी अन्य पेज पर जाना। हालाँकि, यह आज के लिए एक कार्य नहीं है।
सामान्य तौर पर, मोबाइल डिवाइस के तहत टाइपसेट करना काफी दिलचस्प था, हालांकि यह असामान्य रूप से कठिन था। यह मुश्किल है क्योंकि इस समय के लिए मैं कल्पना नहीं करता हूं कि नेविगेशन को सही तरीके से कैसे रखा जाए, छोटे स्क्रीन पर अन्य सेवा तत्व, मानक तत्वों से अलग कैसे करें - सामग्री, आदि। यदि आपके पास कोई विचार, विचार या जीवित उदाहरण है - टिप्पणियों में फेंक दें। यह देखना भी बहुत दिलचस्प होगा कि आईफोन और अन्य पर बैशर का मोबाइल संस्करण छोटे उपकरणों पर कैसे दिखता है (मेरे पास 640x480 है, मुझे पता भी नहीं है, दुर्भाग्य से या सौभाग्य से)। यदि किसी के पास एक समान अवसर है - टिप्पणियों में स्क्रीनशॉट पोस्ट करें, या उन्हें ईमेल द्वारा मुझे फेंक दें: webmaster@basher.ru । सामान्य तौर पर - मुझे इस मामले में किसी भी मदद की खुशी होगी। कुछ हफ़्ते में मैं मोबाइल उपकरणों के लिए लेआउट की सुविधाओं के बारे में अधिक विस्तार से रिपोर्ट करने और लिखने का वादा करता हूं।
अपने लेआउट का आनंद लें!