2010 मार्च 13 2010

@ Fontface: यह अपनी पसंद का एक फ़ॉन्ट के साथ व्यक्त WebFonts का उपयोग

सीएसएस इस साल 10 साल के अस्तित्व पूरा! उन जो थोड़ी देर के लिए आस पास कर दिया गया है, उनके (या नहीं) रोटी सीएसएस का उपयोग कर कमाई है, तो आप जानते हो सकता है कि कैसे हम फोंट का एक अच्छा चयन के लिए भूख से मर गया है. फोंट की कमी के साथ भी उन लोगों की तरह डिजाइनर सीएसएस ज़ेन गार्डन सीएसएस पृष्ठभूमि छवियों का उपयोग करने के लिए अपने डिजाइन करने के लिए कुछ न्याय करने का पीछा में फोंट की जगह बना दिया है. हम भी फ़्लैश / जावास्क्रिप्ट ® हैक्स हमारे डिजाइन लक्ष्यों को प्राप्त करने की कोशिश की है. कोई मतलब है इस फोंट हम हमारी वेब डिजाइन में इच्छा प्राप्त करने के लिए एक गलत तरीका है, लेकिन निश्चित रूप से, यह सबसे वांछनीय रास्ता नहीं है. और अधिक वर्षों में वेब डिजाइनर, मेरे जैसे, पूरी तरह से उनके डिजाइन के लिए दस या तो फोंट पर भरोसा है.

वेब मानकों और फ़ॉन्ट स्वरूप में हाल के घटनाक्रम से यह संभव करने के लिए वही पुरानी डिफ़ॉल्ट फ़ॉन्ट के अलावा अन्य टाइपफ़ेस में HTML पाठ प्रस्तुत करना. "@ Fontface" सीएसएस decleration के में आता है.

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

  1. ट्रू टाइप - एक प्रारूप स्क्रीन पर अच्छे लग रहे करने के लिए डिज़ाइन. विंडोज ब्राउज़र (क्रोम) के लिए विशेष रूप से सिफारिश की है.
  2. ओपन टाइप (CFF) - इस प्रारूप मुद्रण कार्य के लिए बेहतर है और Windows पर हमेशा अच्छा नहीं लग रही.
  3. ईओटी - आप इस प्रारूप की जरूरत है अगर आप इंटरनेट एक्सप्लोरर को लक्षित करना चाहते हैं. IE के किसी भी अन्य प्रारूप का उपयोग नहीं होगा. हमारे ईओटी "लाइट," क्योंकि वे न तो और न ही संकुचित कर रहे हैं डोमेन प्रतिबंधित विचार किया जाएगा.
  4. एसवीजी यह एक XML प्रारूप iPhone सहित कुछ ब्राउज़र्स द्वारा समर्थित है.
  5. WOFF इस पार ब्राउज़र, वेब ही फ़ॉन्ट स्वरूप हल्के है (फ़ॉन्ट डेटा ज़िप संकुचित है) और या तो ट्रू टाइप या पोस्टस्क्रिप्ट (CFF) की रूपरेखा के साथ संकलित किया जा सकता है. यह वर्तमान में फ़ायर्फ़ॉक्स 3.6 द्वारा समर्थित है +.

@ Fontface का उपयोग

  @ फ़ॉन्ट चेहरा {
 font-परिवार: 'CalligraphyFLFRegular';
 स्रोत: यूआरएल (CalligraphyFLF.eot ');
 ": स्थानीय (CalligraphyFLF ') (' CalligraphyFLF) स्थानीय, url ('CalligraphyFLF.woff') ('woff') प्रारूप, ('CalligraphyFLF.ttf) url प्रारूप (' ट्रू टाइप '), url (' CalligraphyFLF svg # CalligraphyFLF ') (' svg) स्वरूप;
 }
 @ फ़ॉन्ट चेहरा {
   font-परिवार: "आपका टाइपफ़ेस";
   स्रोत: url ("/ फोंट font_filename.eot");
   ": (वैकल्पिक नाम) स्थानीय, स्थानीय, (Alternatename")
     url ("/ फोंट font_filename.woff") प्रारूप ("woff)
     url ("/ फोंट font_filename.otf") ("ओपन टाइप) स्वरूप,
     url ("/ फोंट # font_filename font_filename.svg") प्रारूप (SVG ");
   }
 h2 {font-परिवार: "आपका टाइपफ़ेस, जॉर्जिया, सेरिफ़;} 

जैसा कि आप ऊपर के उदाहरण से देख, चुना फ़ॉन्ट टाइपफ़ेस शामिल कर सकते हैं, एक ही टाइपफ़ेस लिए fonttypes का एक सेट करने के लिए लिंक है. इसलिए लोगों को "फ़ॉन्ट किट के रूप में इसे देखें.
फ़ॉन्ट उपलब्ध किट कि एंड यूज़र लायसेंस एग्रीमेंट (EULA) के तहत सीएसएस @ फ़ॉन्ट चेहरा यह संपत्ति के साथ स्पष्ट रूप से जोड़ने की अनुमति देता है.

उपयोगी WebFont संसाधन:

  • @ फ़ॉन्ट चेहरा एम्बेडिंग के लिए उपलब्ध फ़ॉन्ट्स पर विकी पृष्ठ http://webfonts.info/wiki/index.php?title=Main_Page
  • रे Larabie . वह एक प्रसिद्ध फ़ॉन्ट डिजाइनर जो दिलचस्प ट्रू टाइप फोंट वेब पर उपयोग के लिए आसानी से उपलब्ध के सैकड़ों बना दिया है. अपने फोंट, सजावटी, सुरुचिपूर्ण और चंचल हैं.
  • Dieter Steffmann एक और महान फ़ॉन्ट डिजाइनर है. वह भी, कई सुंदर फोंट उपयोग करने के लिए किसी के लिए उपलब्ध बना दिया है.
  • फ़ॉन्ट दुकान : फोंट वेब के उपयोग के लिए विशेष रूप से डिजाइन प्रदान करता है. अधिक सबसे सफल FontFont के परिवारों के 30 अब वेब FontFonts के रूप में उपलब्ध हैं. FontShop भी एक विस्तृत WebFont उपयोगकर्ता पुस्तिका है http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • फ़ॉन्ट गिलहरी : सभी फ़ॉन्ट कि फ़ॉन्ट गिलहरी @ फ़ॉन्ट चेहरा सीएसएस embedding के साथ उपयोग के लिए प्रदान करता है showcases. फ़ॉन्ट गिलहरी प्रकार के एक प्रभावशाली मात्रा प्रदान करता है, एक बाहर ले इसे मृत सरल बनाता है, और handily "किट" प्रदान करता है अपनी पसंद का टाइपफ़ेस कई प्रारूपों में, डेमो HTML और सीएसएस के साथ पैक किया है कि बहुत वर्तमान @ फ़ॉन्ट चेहरा वाक्यविन्यास का उपयोग करता है . उन्होंने यह भी एक तरह से अपने खुद के फ़ॉन्ट चेहरा किट प्रदान करते हैं . यदि आप उपयोग करना चाहते टाइपफ़ेस उचित लाइसेंस दिया गया है (है कि लोगों को अपने कंप्यूटर के साथ आने जरूरी ठीक नहीं हैं), जनरेटर ईओटी, एसवीजी, और हे उत्पादन! WOFF फ़ाइलें.

2010 9 Jan 2010

"वेब डिजाइनर, जो कोड नहीं कर सकते हैं" के बारे में

Photoshop और Illustrator जैसे उपकरणों के साथ अपने सीमित कौशल सेट के साथ, मैं ईमानदारी से कि मैं एक बेहतर डेवलपर है की तुलना में मैं एक डिजाइनर हूँ कबूल कर सकते हैं. लेकिन कोर के साथ मेरी पृष्ठभूमि (सर्वर साइड) जावा / PHP / कोबोल के साथ विकास, मेरे यूआई विकास कौशल पर एक बहुत ही सकारात्मक प्रभाव दिया गया है. मैं क्या मतलब है, जबकि मेरे डिजाइन बनाने, यानी जब भी मैं डिजाइन करते हैं, मैं कैसे डिजाइन सबसे अच्छा-HTML सीएसएस में परिवर्तित किया जा सकता है और जब HTML के सीएसएस कर के बारे में सोचते हैं, मैं बैकेंड प्रौद्योगिकी के बारे में एक विचार दे और यथोचित सुनिश्चित करें कि कि HTML XSL के छोरों या PHP के टुकड़े आदि में आसानी से लागू किया जा सकता है

इन वर्षों में, मैं डिजाइन करने के लिए किया गया है जो शायद donot एक सुराग HTML या सीएसएस क्या है यूआई डिजाइनर द्वारा सिर फेंक दिया. इन वर्षों में मैं सोच रहा है कि मैं बहुत अधिक के लिए पूछ रहा होगा, अगर मैं सिर्फ डिजाइनर, जो मेरे गले के नीचे अपने कोड के लिए डिजाइन "असंभव" Shov की कोशिश कर रहा है बस थोड़ा सा क्या अपने डिजाइन परिवर्तित किया जाएगा समझने के लिए उम्मीद में. कि सही में मदद मिलेगी?

तो, मैं आज इस पोस्ट के पार आया था ... वेब डिजाइनर, जो कोड नहीं कर सकते हैं ... धन्यवाद भगवान! मैं सिर्फ कई लोग ऐसा ही लगता है ... ऊपर artitle घना एक सा है .. लेकिन पढ़ा है, इसके बारे में हर शब्द के लायक.

इलियट जे स्टॉक धन्यवाद ... मैं निश्चिंत लग रहा है!

यहाँ से कुछ अंश प्रस्तुत है Elliots लेख .

वाह, क्या एक दिन! यह एक छोटे से चहक के साथ शुरू किया और चर्चा है कि पूरे वेब डिजाइन समुदाय भर झाडू लग रहा था के साथ समाप्त हो गया. ऐसा लगता है वहाँ कुछ बहुत मजबूत राय है कि वेब डिजाइनर कोड करने के लिए सक्षम होना चाहिए विषय पर आयोजित कर रहे हैं.
...
तो, इससे पहले कि हम इस में मिलता है, मुझे जल्दी से संक्षिप्त करने के लिए मैं क्या चहचहाना पर आज सुबह पर कहा की अनुमति:

ईमानदारी से, मैं हैरान हूँ कि 2010 में मैं अभी भी वेब डिजाइनर, जो अपने स्वयं के डिजाइन कोड नहीं कर सकते हैं भर में आ रहा हूँ. कोई बहाना नहीं है.

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

हम 'वेब', Illustrator 300dpi में भेजा डिजाइन, कोड के लिए असंभव है, कोई संगति / प्रयोज्य मिलता है.
~~ एमी Mahon

देर हो रही है, और मैं यह किसी भी तरह लपेट मिल गया है. मैं जानता हूँ कि वहाँ कई जो मुझसे असहमत हो जाएगा, और मेरा इरादा अपमान या किसी को भी, जो कोड नहीं कर सकते हैं परेशान नहीं है, लेकिन मुझे आशा है कि मैं क्या कहा है की कुछ कहते हैं कि हमेशा आते हैं जब में delving के कुछ दर्शाता है इस बहस.

दिन के अंत में, मैं जो कोड और नहीं कर सकते हैं जो कर सकते हैं पर किसी भी नींद नहीं खोना है. मैं सिर्फ सही मायने में हूँ तो कई डिजाइनरों है कि सामने अंत कौशल की कमी है, के रूप में मैंने सोचा कि यह अतीत की बात थी खोजने के लिए आश्चर्य है.

भी टिप्पणी पढ़ने के लिए, वहाँ 320 के आसपास टिप्पणी थे, के रूप में मैं लिखना ... वे कर रहे हैं एक पढ़ने के काबिल है.
कृपया Elliots पूरा पोस्ट यहाँ पढ़ें .. वेब डिजाइनर, जो कोड नहीं कर सकते हैं


2010 4 मार्च 2010

पाठ के साथ संरेखित रेडियो बटन

चूंकि रेडियो बटन और पाठ इनलाइन हैं, ताकि पाठ ही रेडियो बटन के नीचे करने के लिए पंक्ति में होगा, पाठ के लिए रेडियो बटन के तहत थोड़ा दिखाई देगा.
यदि आप इन शीर्ष पर संरेखित करने के लिए चाहते हैं, तो आप के लिए से divs या spans (उचित के रूप में) की तरह अलग कंटेनर में रेडियो और पाठ जगह है और वे संरेखण का ख्याल रखना होगा. तालिका कक्षों भी उपयोग, के अपने डिजाइन संक्षिप्त परमिट आसान हो जाएगा.

यह वही हर ब्राउज़र में नहीं लग रहे, हर ब्राउज़र के रूप में रेडियो थोड़ा अलग प्रदर्शित करता है, इसलिए वहाँ हमेशा के लिए आकार मुद्दों पर कोई फर्क नहीं पड़ता कि तुम क्या करते हो जा रहा है.


NDK घर | आईटी व्यक्त | व्यक्त तालु | व्यक्त Penmenship | श्रद्धा व्यक्त | अपने आप को व्यक्त