2009-12-04 9 views
14

हा सब,स्मार्टफ़ोन वेब विकास के साथ कहां से शुरू करें?

तो मैं हमारे संपत्ति पोर्टल के लिए एक स्मार्टफोन वेबसाइट के विकास के साथ taksed किया गया है और मैंने सोचा देखो क्या सबक दूसरों ऑनलाइन बताने के लिए किया था, लेकिन मैं बहुत कम मिल गया है।

मैं एक ऐप नहीं बना रहा हूं, मैं एक वेबसाइट बना रहा हूं और मैं ऐसा करने की तलाश में हूं और एचटीएमएल, सीएसएस, चौड़ाई/ऊंचाइयों के दृष्टिकोण के संबंध में नहीं हूं, जावास्क्रिप्ट (jquery पर अच्छा खेलने के लिए जा रहा है सभी प्लेटफॉर्म?) और कुछ भी जो इस तरह के मंच से संबंधित है।

अन्य लोगों के चारों ओर देखकर मुझे http://mobile.whistlerblackcomb.com/ बहुत पसंद है।

सादर, डेनिस

+0

आपको किस फोन के साथ संगत होने की आवश्यकता है? –

+0

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

उत्तर

15

अद्यतन:

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


दो सबसे महत्वपूर्ण मुद्दों पर विचार करने के लिए जब शुरू हो रही हैं:

1) डिवाइस का पता लगाने

2) मोबाइल यूआई डिजाइन

जारी संख्या 1 के लिए, मैं दृढ़ता से देखने की सलाह देते WURFL डिवाइस डेटासेट:

http://wurfl.sourceforge.net/

इसका उपयोग करके, आप अपने उपयोगकर्ता एजेंट स्ट्रिंग का उपयोग करके, अपनी साइट तक पहुंचने वाले उपकरणों की कुछ (क्षमताओं) क्षमताओं को पुनर्प्राप्त कर सकते हैं। परीक्षण मोबाइल वेब ऐप्स नरक से ब्राउज़र परीक्षण की तरह है - उपकरणों और ब्राउज़रों के इतने सारे अलग संयोजन हैं, कि यह एक कठिन काम है। आप काफी सक्षम फोन के लिए एक या दो संस्करणों विकास पर ध्यान केंद्रित कर सकते हैं, कहते हैं:

1) कम से कम 300px दावा किया कि "वेब" समर्थन और एक टच स्क्रीन 2) ऊपर के रूप में ही साथ चौड़ाई है, लेकिन एक टच स्क्रीन

बिना

आप एक बहुत ही उपयोगी साइट बना सकते हैं जो अधिकांश "स्मार्टफोन" या "ऐप फोन" के लिए काम करेगी क्योंकि David Pogue ने उन्हें अधिक सटीक रूप से नामित किया है। वास्तविक परीक्षण के लिए, आप की कोशिश कर सकते हैं:

1)) अपने मित्रों के सभी और फोन की किस तरह वे 2 एक फोन की दुकान पर जा रहे हैं की एक सूची बनाने और अपनी साइट का परीक्षण करने के लिए उन फोन का उपयोग कर

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

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

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

1) यह अनावश्यक है, यह देखते हुए कि ब्राउजर एक बैक बटन के साथ आता है जो उपयोगकर्ता बहुत परिचित हैं। देशी ऐप में ये वैश्विक नौसेना मौजूद होने का कारण यह है कि वे एक मुफ्त नेविगेशन टूल के साथ नहीं आते हैं।

2) वेब शानदार है। आप अपनी संरचना में किसी भी बिंदु पर "ऐप्स" दर्ज, छोड़ और पुनः दर्ज कर सकते हैं। यह मानकर कि कोई उपयोगकर्ता आपके ऐप के माध्यम से एक रैखिक पथ लेता है, आप अपनी वेबनेस कम कर रहे हैं, जिससे इसे वेब के बाकी हिस्सों के साथ बहुत अधिक कच्चा बना दिया जाता है।

3) यह टूट जाता है। या तो आप ऐसी परिस्थिति में जा सकते हैं जहां ऐप नेविगेशन और ब्राउज़र नेविगेशन विपरीत दिशाओं में इंगित करता है (ऐप इतिहास के माध्यम से अपने ऐप चरणों में बैक बटन दबाकर), या आप जावास्क्रिप्ट के साथ एक बैक बटन नकली करते हैं, जो टूटता है अगर वे ' एक ऐप (ईमेल किए गए लिंक, बुकमार्क) की शुरुआत में शुरू नहीं होता है, या आप सत्र सेट अप करते हैं, जो ब्राउज़र से आपको जो कुछ मिलता है उसे दोहराने के लिए एक बड़ा दर्द हो सकता है।सत्र टूटी हुई (ईमेल किए गए लिंक, बुकमार्क) के लिए भी कमजोर हैं, और आप वास्तव में ज्यादा लाभ नहीं उठा रहे हैं।

मुझे लगता है कि मेरी मुख्य बिंदु यहां हैं:

1) मत भूलना आप वेब पर कर रहे हैं। वेब शांत है, ब्राउज़र शांत हैं, इसका उपयोग करें।

2) चारों ओर खेलने से डरो मत। यहां कई अच्छी तरह से स्थापित पैटर्न नहीं हैं, इसलिए आपको अपने कुछ को आजमा सकते हैं।

+0

अच्छी तरह से रखो, मेरे द्वारा +1 –

+1

इसके अलावा, यदि आप अपने डेटाबेस के रूप में mysql का उपयोग करने की योजना बना रहे हैं, तो टेरा-वुआरएफएल (http://www.tera-wurfl.com/) वेनिला xml wurfl की तुलना में वास्तव में एक अच्छा प्रदर्शन बढ़ावा देता है । –

0

आधुनिक स्मार्टफोन के साथ वहाँ वास्तव में एक पारंपरिक वेबपेज और एक समर्पित वेबसाइट के विकास के बीच कोई अंतर नहीं है।

लेकिन आप अनुकरणकर्ताओं को आजमा सकते हैं कि ऐप्पल, आरआईएम, मोटोरोला और नोकिया जैसे प्रमुख खिलाड़ी यह देखने के लिए प्रदान करते हैं कि वे कैसा दिखते हैं। मैं कुछ अन्य मोबाइल साइटों पर एक नज़र लेने के सुझाव देंगे "Put Your Content in My Pocket" क्रेग HOCKENBERRY

द्वारा
1

एक सूची के अलावा प्राप्त कर सकते हैं आप शुरू कर दिया। मैंने नीचे कुछ पोस्ट किया।

  • m.reddit.com
  • diggriver.com
  • mobile.washingtonpost.com
0

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

इसके अलावा, निम्नलिखित पर विचार:

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

आप हो सकता है यह सहायक भी ढूंढें: Why your mobile site probably sucks

0

मोबाइल साइटों का उपयोग अक्सर नियमित फोन पर किया जाता है, और अक्सर www.example.com के बजाय m.example.com पर जाते हैं। इन साइटों में कम/कोई जावास्क्रिप्ट या सीएसएस संगतता नहीं है। जब आप मोबाइल साइटों के बारे में पूछते हैं, तो ध्यान रखें कि दो प्रकार की मोबाइल साइटें हैं।

आधुनिक स्मार्टफोन ब्राउज़र को एक पूर्ण ब्राउज़र के समान ही संभालने के लिए माना जाता है, लेकिन वे नहीं हैं। वास्तव में, आईफोन एक फंतासी दुनिया में रहता है और 900 पिक्सल की खिड़की चौड़ाई की रिपोर्ट करेगा!

ऐसी युक्तियां हैं जो आप स्मार्टफ़ोन के लिए कर सकते हैं। टचस्क्रीन के लिए कोई उपयोग नहीं है: होवर छद्म-वर्ग। यह मेनू के लिए एक समस्या हो सकती है जिसके लिए होवरिंग की आवश्यकता होती है।आप इसके चारों ओर डिजाइन कर सकते हैं। कैसे? आप पूछते हैं ...

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

अब जब कि तुम यह कर लें तो आप, सीएसएस सशर्त बयान का उपयोग कर सकते

@media only all and (max-width:600px){

CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS 
} 

मैं इस का उपयोग किया है <div> कि एक मोबाइल डिवाइस स्क्रीन को भरा हुआ ब्लॉक करने के लिए: लाइटबॉक्स, उदाहरण के लिए। मैंने छवि चौड़ाई को संशोधित करने के लिए भी इसका इस्तेमाल किया, इसलिए वे डिवाइस पर बेहतर फिट बैठते हैं। मैंने 600 पीएक्स क्यों चुना? मुझे लगा कि कई नई "नेटबुक" को यहां भी लम्बा होना चाहिए।

मुझे उम्मीद है कि इससे मदद मिलती है।

--Dave

0

आप एक iPhone या iTouch के लिए विशेष रूप से विकास करने के लिए देख रहे हैं thise सशर्त बयान का उपयोग करें।

[if SafMob] @import url(iphone.css); 

यहां मोबाइल के लिए साइट बनाने के बारे में एक लेख है। http://www.alistapart.com/articles/pocket/

0

Designing Effective Mobile Interfaces पर मेगन फिशर की बात एक अच्छा अवलोकन प्रदान करती है। वह कैमरून मॉल द्वारा "मोबाइल वेब डिजाइन" पुस्तक की सिफारिश करती है। तकनीकी रूप से, यदि आप पहले से नहीं हैं तो मैं एक्सएचटीएमएल मोबाइल प्रोफाइल से परिचित होकर शुरू करूंगा।

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

0

वहाँ भी इस threeparter, "मोबाइल वेब डिजाइन" कैमरून रंडी के द्वारा होता है:

State of the Mobile Web
Methods to the Madness
Tips & Techniques

श्रृंखला 2005 से है, लेकिन जानकारी से कई अभी भी प्रासंगिक है। अंतिम भाग "टिप्स & तकनीक" मोबाइल वेब विकास पर कई अन्य संसाधनों को भी सूचीबद्ध करता है।

1

यहां एक ऐसी साइट है जो वेब के लिए स्मार्टफ़ोन एप्लिकेशन का भुगतान करती है, मैंने अभी तक परीक्षण नहीं किया है, मैं इसका उपयोग करने के बाद टिप्पणी पोस्ट करूंगा! http://www.makeuseof.com/dir/appsbar-build-your-own-smartphone-app/

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^