استبدال الأدوات الديناميكية الأساليب والأدوات العملية

عندما يتعلق الأمر بتصميم الويب ، لا ينبغي إعاقة إبداع التصميم عن طريق الخيارات المحدودة لخطوط الويب المدعومة التي نسميها خطوط آمنة للويب. يجب أن يتمتع المصممون بحرية استخدام أي خطوط يفضلونها على العناوين والمحتويات.

في عام 2005 ، أصبح استبدال الصور الديناميكي شائعًا باستخدام تقنية تسمى استبدال Inman فلاش قابلة للتحجيم (sIFR). طورت بواسطة شون إنمان, يستفيد sIFR من Javascript و Adobe Flash للسماح لمصممي الويب باستخدام أي خطوط مخصصة يعجبون بها على موقع الويب ولا تزال تحتفظ برؤية أولئك الذين ليس لديهم هذا الخط. ومع استمرار تطور الويب ، أصبح لدينا اليوم حلولًا بديلة تستخدم العديد من التقنيات ، في حال لم تكن من محبي فلاش.

دون مزيد من اللغط ، دعونا نلقي نظرة على بعض تقنيات لتحقيق الاستبدال الديناميكي للصور.

التقنيات المستخدمة عادة

فيما يلي بعض التقنيات الأكثر استخدامًا لاستبدال الصور الديناميكية.

استبدال Inman فلاش قابلة للتحجيم (sIFR)

تقنية sIFR هي إحدى أكثر الطرق شيوعًا لتضمين الخطوط المخصصة على مواقع الويب. يستخدم Javascript و Flash لإنشاء محرف مخصص لموقع الويب الخاص بك ويسمح باختيار المحرف المحول. بصرف النظر عن ذلك ، يظل المحرف المحول كنص في أكواد المصدر بحيث لا يزال بإمكان محرك البحث الزحف إليها.

sIFR 2 (مستحسن) هو الإصدار الثابت الحالي ، ومع ذلك إذا كنت تبحث في تطبيق sIFR ، فيجب أن تعرف ذلك أيضًا siFR 3 الإصدار التجريبي متاح أيضًا للتنزيل. قد يكون الأمر بسيطًا ، ولكنه على الأقل يحل مشكلة توسيع الخطوط sIFR 2.

أدوات sIFR التي قد تكون في متناول اليدين:

• sIFRvaultsIFRvault هو مستودع لخطوط sIFR يمكنك تنزيله.
• مولد sIFRأداة عبر الإنترنت تتيح لك إنشاء ملفات sIFR .swf ببضع نقرات من الماوس. ما عليك سوى تحميل خط TTF للخط الذي تريد تحويله ومعاينته وتنزيله.
• تحويل الخطوط إلى sIFRقم بتحميل خط .TTF وسوف يتم تحويلهم من موقع الويب هذا إلى ملف sIFR Flash.

sIFR لايت

sIFR الأصلي هو 22 كيلو ، لذلك ديف قررت إعادة صياغة باستخدام نهج أكثر وجوه المنحى ، والنتيجة؟ 3x أصغر في 3.7 كيلو.

استبدال النص الديناميكي PHP + CSS (P + C DTR)

كما يوحي الاسم ، هذه هي طريقة استبدال النص التي تستخدم PHP و CSS التي تستخدم الطريقة الأصلية الموضحة في ستيوارد روزنبرغر. بل هو أيضا تعزيز من الإصدار السابق التي وضعتها ر. ماري كوكس لا يدعم التفاف النص والعلامات الداخلية. شيء رائع آخر عن P + C DTR هو ، يمكن تخصيص نص الصورة باستخدام علامات CSS.

typeface.js

ماذا يجعل typeface.js خاص هو أنهم يستخدمون جافا سكريبت فقط لتضمين خطوط مخصصة ويمكن تخصيص نمط أكثر مع HTML و CSS ، لا يلزم فلاش. إنه مفتوح المصدر ويدعم معظم المتصفحات التي نستخدمها هذه الأيام ، سواء كان Safari أو Firefox أو IE (6 وما فوق).

شخصيا بعد بعض التجارب على typeface.js ، نعتقد أنه قد يكون هناك مجال محتمل للتحسينات. أولاً ، تميل الخطوط إلى جعلها مختلفة قليلاً بين المتصفحات المختلفة. إذا كنت تستخدم typeface.js ، فنحن نقترح عليك إجراء فحص عبر المستعرض قبل افتراض أن ما تراه في Firefox سيكون ما تراه في Safari. لا يمكن اختيار النص أيضًا باستخدام typeface.js.

لا يتم تصنيف الخطوط المخصصة في typeface.js؛ وهذا يعني أن المستخدمين قادرون على تنزيل الخطوط. يمكن أن يؤدي إلى مشكلة حقوق التأليف والنشر. يُنصح بالتحقق جيدًا للتأكد من أن الخطوط التي تستخدمها مناسبة لإعادة التوزيع.

Cufon

لا فلاش المطلوبة, Cufon هو بديل رائع لـ sIFR وهو سهل التنفيذ. أولاً ، يمكنك استخدام منشئ Cufon لإنشاء وتخصيص الخط الذي تريده ، ثم تقوم بإدراج Cufon Javascript في التعليمات البرمجية المصدر الخاصة بك وإعلام البرنامج النصي عن المحددات التي تريد تخصيص الخطوط فيها.

ستكون أكبر مشكلة في Cufon هي المشكلة القانونية الخاصة باستخدام هذه الخطوط المخصصة عبر الإنترنت. نظرًا لأنه مضمن داخل Javascript ، فيمكن أن يتم نسخه بسهولة من قبل أي شخص يشاهد التعليمات البرمجية المصدر. الخطوط المخصصة Cufon غير قابلة للاختيار ، وهذا هو الآخر إيقاف.

عمليات تجميل

المعروف أيضا باسم استبدال صورة الوجه (FLIR), إنها طريقة أخرى رائعة لـ sIFR لا تحتاج إلى Flash. يبدو أن البديل الآخر هو الوصول إلى مشكلة sIFR's Flash.

يستخدم Facelift مكتبة GD لـ PHP و PHP. يرثون المشكلة القديمة لاستبدال الخطوط المخصصة - غير قادر على تحديد النص. بصرف النظر عن ذلك ، نعتقد أنه أمر رائع للغاية.

المزيد من الأساليب

قد يتم استخدام الأساليب المذكورة أعلاه على نطاق واسع ، لكننا لاحظنا بعض الطرق الأخرى أيضًا لإعطاء تحويل النص إلى محارف مخصصة جميلة.

اكتب حدد

TypeSelect تستفيد من typeface.js و jQuery و the canvas و toDataURL وخصائص خلفية CSS والنص المتراكب الحقيقي لإعطاء محرف مخصص على موقع الويب الخاص بك. يعمل اختيار النص على Firefox و Safari وحتى Chrome ولكن ليس IE.

استبدال صورة SWF (swfIR)

swfIR يمنحك القدرة على تطبيق مجموعة متنوعة من المؤثرات البصرية على أي أو كل الصور على موقع الويب الخاص بك. على سبيل المثال ، يمكنك إضافة أي صور على موقع الويب الخاص بك وسوف تضيف swfIR حدًا مستديرًا أو تقوم بتدوير الموضع أو حتى تضيف الظلال إليه.

تسع تقنيات لاستبدال صورة CSS

هذه ليست بدائل النص الديناميكي ، ولكن كريس كويير يوضح ما يصل إلى تسع تقنيات CSS مختلفة لاستبدال النص بالصور ؛ يحتوي كل منها على بطاقة تقرير تسرد حالة - ماذا لو كانت الصور في وضع التشغيل / الإيقاف ، CSS في وضع التشغيل / الإيقاف.

الخط الموقد

الخط الموقد الاستفادة من Scalable Inman Flash Replacement (sIFR) لتغيير ألقابك إلى خط مخصص. كل ما عليك القيام به هو العثور على الخط وتحديده وإدخال الرمز في الرأس وسيتم تغيير عنوانك في أي وقت من الأوقات.

وورد + استبدال صورة ديناميكية

إذا كنت من مستخدمي WordPress الذين يبحثون عن حل بديل للصورة الديناميكية للعنوان أو حتى لمحتوى مدونتك ، فمن المحتمل أن يكون هناك مكون إضافي لهم. إليك بعض الإضافات البديلة لاستبدال النصوص التي نتعرف عليها.

ووردبريس البرنامج المساعد - الفسفور الابيضالفسفور الابيض sIFR تم إنشاؤه لإزالة المضاعفات من الحصول على خطوط مخصصة على موقع WordPress. باستخدام WP sIFR ، ما عليك سوى تحميل ملف خط SWF الخاص بك إلى دليل البرنامج المساعد ثم تسجيل الدخول وتنشيطه وتكوين أنماطه كلها في لوحة الإعدادات.

Cufon وورد البرنامج المساعد - الفسفور الابيض - Cufonالشيء الوحيد الذي عليك القيام به هو تحويل ملفات الخطوط وتحميلها في دليل الإضافات. يمكنك تمكين الكائنات التي ترغب في استبدالها في قائمة المسؤول في WordPress.

تجميل صورة Replacment (FLIR) وورد البرنامج المساعدFLIR بالنسبة إلى WordPress هو صديق لكبار المسئولين الاقتصاديين ويؤدي فقط إلى عرض الصورة في المتصفح إذا تم تمكين JavaScript. يظل رمز HTML / XHTML بدون تغيير ، مما يجعل علامات رأسك قابلة للقراءة بواسطة محركات البحث والصفحة التي يمكن قراءتها من قِبل من هم دون JavaScript.

لوحة تحكم الخط الموقدال الخط الموقد يتيح لك مكون لوحة التحكم الإضافي إضافة أي من الخطوط المجانية التي تزيد عن 1000+ المتاحة على موقع Font Burner إلى سمة WordPress الخاصة بك.