وقف مطاردة قرارات الشاشة
نحن نعيش في مثل هذا الوقت المثير في عالم الويب. تتقدم التكنولوجيا والمعايير بمعدل قد يكون أسرع وأكثر إثارة من أي وقت مضى. مع تغير الأشياء ، وكذلك عاداتنا ، ومنطقة واحدة أعتقد أنها شهدت تغييرات أكبر من معظمها يجب أن يكون التغيير في القرار الذي تعمل به أجهزتنا الآن.
القرار هو شيء مضحك لقياس ؛ انها ليست تغيير حجم مادي ، ولكن تغيير الوضوح. إنه لا يجعل الصور أو أكثر إشراقا أو أكثر غنى بالألوان ، بل يجعلها أكثر كثافة. إنه أيضًا شيء نادرًا ما يفهمه الناس حتى يراهوا لأنفسهم.
بالطبع ، عندما نحصل على مذاقات عالية الدقة ، نحن مدمن مخدرات. ونريد جميعًا أن تبدو مواقعنا (والمواقع الإلكترونية لعملائنا) رائعة على الأجهزة التي تستضيف هذه الشاشات. يتسابق العديد من مصممي الويب نحو هذا الهدف من خلال إنشاء صور لكل قرار جديد يأتي في طريقنا. أو ، كما أسميها في هذه المقالة ، "مطاردة قرارات الشاشة".
مقدمة ل SVG
كثير منا يعرف ما SVGs (Scalable Vector Graphics). لقد رأينا ذلك على موقع W3C HTML5 ، تحت عنوان "3D ، الرسومات والمؤثرات". SVG هي تقنية HTML5 قياسية تعرض الصور مع التعليمات البرمجية. أو شيء ما.
على الأقل ، هذا هو الرد العام الذي حصلت عليه عندما سألت الأشخاص عن رسومات SVG. إنه في الحقيقة ليس شيئًا يهتم به الناس ، لأن قيمته ليست مفهومة تمامًا.
أريد أن أريكم كيفية تجنب "مطاردة قرارات الشاشة" ، وقد حدث أن معيار SVG يمكن أن يساعدنا في فعل ذلك.
حالة رسومات شبكية العين
عندما أقول "رسومات شبكية العين" ، فأنا أشير إلى أي أجهزة لديها دقة شاشة أعلى من شاشات العرض التقليدية ، الرياضية بطريقة دقة أعلى من 72ppi (بكسل لكل بوصة).
لقد حطمت شركة آبل الشهيرة حاجز 72 بيكسل مع جهاز آيفون 4 ، وهو جهاز يحتوي على شاشة رائعة جديدة ذات دقة عالية ، والتي تبدو مختلفة عن أي شيء آخر رأيناه من قبل. إلا عندما كنت تستخدم لتصفح شبكة الإنترنت ... بدا الويب القمامة.
يحتوي الويب على 72 صورة محسنة. في وقت كتابة هذا ، فإن معظم الويب لا يزال ، بعد عامين من إطلاق iPhone 4.
الآن ، لدينا جميع أنواع الأجهزة مع رسومات شبكية عالية الجودة. يشق طريقه ببطء عبر خط منتجات Apple بالكامل ، ممتدًا إلى iPod Touch و iPad وحتى أحدث جهاز MacBook Pro. تظهر الهواتف الذكية في جميع أنحاء المكان مع شاشات عالية الدقة ، لدرجة أن عرض الدقة "القياسي" يشبه قبعة قديمة في هذه المرحلة تقريبًا.
لا يزال القرار تعتمد
عندما تغلب مجتمع تصميم الويب على مشكلة الصور الباهتة مع الصور التي تم تحميلها بطريقة شرطية بحجم 2x (الصور التي تم إنشاؤها لتكون ضعف حجم نظائرها الأصلية ، التي تم تحميلها على الأجهزة عالية الدقة فقط) ، بدا الويب جيدًا مرة أخرى ، بالنسبة للجزء الأكبر . حتى أن بعض المصممين قد أعلنوا مواقعهم على الويب على أنها "قرار مستقل".
بطبيعة الحال ، ما كان ينبغي عليهم الإعلان عنه بالفعل على مواقعهم كما كان "محسّنًا لقراري الشاشة".
ستستمر الأجهزة في التحسن ، وستستمر القرارات في التحسن ، وستظل تتمتع الويب بعدد متزايد من عوامل النموذج. ماذا عن مستقبل لا مفر منه @ 3X؟ ماذا عن @ 4x؟ ماذا لو أصبح معيار "1x" غير ضروري؟ ما الذي يجعل 3x "@ 3x" وليس "@ 2.5x"؟
فوضوي حقا.
ما هو أكثر من ذلك ، هذا النوع من التقنية غير منتشر على نطاق واسع. أتصفح الويب على MacBook Pro السابق ذكره مع شاشة Retina ، ومعظم مواقع الويب للأسف هي المكان الذي كانت فيه دائمًا منذ iPhone 4: ضبابية. إن إنشاء جميع صور الويب الخاصة بك مرة أخرى يعد مهمة مهمة شاقة ، خاصة عندما يكون تصميم تصميم الويب بالكامل مع الصور النقطية لفترة طويلة.
شبكة غير قابلة للتحميل
حتى اليوم ، مع صورنا التي عددها 2x ، ما زلنا لا نستطيع تكبير صفحات الويب دون أن تكون قبيحة مرة أخرى. يدير النص زووم على ما يرام ، ولكن بالمقارنة ، تصرخ الصور من أجل صادرات @ 4x القادمة في المستقبل (شيء لا يراه أحد مناسبًا ليخدم فقط فرصة الخروج التي قد يرغب أحد الأشخاص في تكبيرها بأربعة أضعاف رمز RSS الخاص بك) .
الذهاب حقا قرار مستقل
المشكلة هي مع الصور bitmapped. لقد عرفنا دائمًا أنهم غير رابحين ، والآن لا يختلف. ما نحتاجه هو الرسومات المتجهة على مواقعنا الإلكترونية. يتم احتساب الرسومات المتجهة بواسطة سلسلة من الإرشادات ، بدلاً من خبزها على شبكة حيث يمثل كل بكسل لونًا. أدخل ، SVG.
مقاس واحد يناسب الجميع
نظرًا لأن رسومات SVG هي عبارة عن رسومات متجهية (ومن هنا جاء اسم "Scalable Vector Graphics") ، فإنها ستبدو رائعة يوم أمس ، وحساسية اليوم وغدًا. بالإضافة إلى ذلك ، نظرًا للطبيعة الطبيعية للرسومات المتجهة ، يمكنك تكبير أي جهاز وستبقى الصور رائعة.
أوقات تحميل أسرع
يبدو أن جعل صورة بحجم 2000 بكسل × 2000 بكسل ، لمصمم ويب ، أمرًا سخيفًا. سيستغرق الأمر وقتًا طويلاً جدًا للتحميل ، حيث سيؤدي ذلك إلى جلب بعض الأجهزة المحمولة إلى الركبتين ، وستكون النسخة 4000 بكسل × 4000 بكسل "@ 2x" جنونًا. وعندما تصبح القرارات أفضل وأفضل ، فإنها ببساطة غير مستدامة. باستخدام SVG ، نظرًا لأنه يمثل تنسيقًا متجهًا ، فلا يهم إذا كانت الصورة 20 بكسل أو 2000 بكسل ؛ وقت التحميل سيكون بالضبط نفس الشيء. الشيء الوحيد الذي يحدث فرقا في أوقات التحميل هو تعقيد كل ملف صورة.
يمكنك استخدامه اليوم
قد لا يكون SVG مدعومًا على جميع الأصعدة ، ولكن Modernizr يمكن للكشف عن ميزة ذلك. من خلال عرض إصدار SVG وغير SVG ، يمكنك جني جميع مزايا SVG ، مع ترك المتصفحات القديمة مع PNG @ 1x. الأمر بهذه البساطة:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }حدود SVG
ليس من الصعب إنشاء رسومات SVG من أي صورة تستند إلى متجه. يمكن تصدير العديد من التطبيقات الاحترافية مثل Adobe Illustrator و Inkscape إلى SVG أصلاً. هناك بعض الأشياء التي ستحتاج إلى معرفتها حول SVG للويب.
لا يمكن أن تحتوي الصور النقطية من أي نوع.
بالتأكيد ، يمكنك إضافتها في تطبيقات تأليف SVG مثل Illustrator أو InkScape ، وحفظ عملك كملفات SVG ، لكنها لن تعرض المكان الذي يهمه: متصفح الويب الخاص بك. سيكون من الضروري استخدام معالج CSS لتحميل صورة نقطية أعلى SVG عند الاقتضاء.
يمكن أن يستغرق تحميلها إلى الأبد إذا كانت معقدة
إذا قمت بعمل SVG معقدة ، فسيتم ضربك بأوقات تحميل لا تختلف عن صورة 2000px x 2000px سالفة الذكر. لا ترغب في رسم لوحة معقدة بتنسيق SVG ، على سبيل المثال.
فلدي يبقيه بسيط
يمكن أن تؤدي التطبيقات ، مثل Illustrator و Inkscape ، أكثر بكثير مما يمكن لمتصفح الويب التعامل معه. انهم تطبيقات التوضيح في مهب الكامل ، وليس تطبيقات SVG الخالق على شبكة الإنترنت. في الواقع ، من الآمن افتراض أن 90٪ من الوظائف التي يقدمها هذا النوع من التطبيقات لن تكون متاحة للمشاهدين على الويب. إذا كنت معتادًا على برامج مكافحة ناقلات الأمراض ، فستحتاج إلى تعلم طرق بديلة لإنشاء التأثيرات التي تعجبك.
حاول تعلم اللغة
شفرة SVG ليست شيئًا يمكنك "رؤيته في ذهنك" كما يمكنك عند قراءة HTML. إنها سلسلة من الإرشادات تم تعيينها على التوالي مقابل بعضها البعض ، عنصرًا حسب العنصر ، طبقة حسب الطبقة. لسوء الحظ ، اعتبارًا من اليوم ، ربما يتعين عليك التراجع هناك من وقت لآخر ، نظرًا لوجود بعض النتائج حتى لا يقدم Adobe Illustrator.
على سبيل المثال ، تحتوي الصور في Illustrator على لوحة رسمت عليها. هو عرض مجموعة من ارتفاع مجموعة. هذا أمر رائع ، ولكن إذا كنت ترغب في التحكم في هذه التفاصيل في المتصفح ، فإنك تحتاج إلى تجريد مثل هذه المعلومات من SVG نفسها (ملاحظة: بعض المتصفحات سوف تفسر CSS لديك بغض النظر عن أي أبعاد SVG معلنة ، ولكن ليس كل ذلك). إنها ليست صعبة بشكل خاص ، ولكنها يمكن أن تكون صداعًا. من المفيد قضاء بعض الوقت في التعرف على اللغة ، حتى يمكنك التلاعب بأكثر من SVG.
SVG في البرية
الشعارات
يجب أن تكون الشعارات عادةً بتنسيق متجه ، لذلك فهي طريقة رائعة لجلب SVG إلى تصميمات موقعك على الويب. باستخدام الترميز أعلاه ، لديك كل ما تحتاجه لأخذ عناصر SVG الأولى الخاصة بك عبر الإنترنت.
الرموز
الرموز هي مرشح كبير ل SVG. لدرجة أنني قمت بإنشاء مجموعة رموز كاملة باستخدام رسومات SVG. تعني الطبيعة القابلة للتحجيم لـ SVG أنه يمكن استخدام الرموز بأي حجم ، مع استيعاب مجموعة واسعة من تصميمات المواقع.
الرسوم المتحركة
كما تجعل الرسوم المتحركة حالة رائعة لاستخدام رسم SVG. بما أن الرسوم المتحركة ترتبط عادةً بعرض ثابت وارتفاع ، فإن SVG تذهب إلى حد ما لمساعدة الرسوم المتحركة في الاستجابة. فلاش تستخدم عناصر الرسم ناقلات ، يمكن الآن HTML5 الرسوم المتحركة أيضا.
صور الخلفية
لطالما كانت الصور الخلفية نقطة صعبة لمطوري الويب ؛ أوقات التحميل المحتملة ، كما ذكرت أعلاه ، يمكن أن تكون مجنونة. يمكن أن تكون صور الخلفية بتنسيق SVG كبيرة كما تريد ؛ لا يزال لديهم أوقات تحميل لاذعة بشرط ألا تكون معقدة بالفعل.
استنتاج
الكل في الكل ، استقلال القرار هو هدف رائع لمصممي الويب والمطورين على حد سواء للسعي نحو. سيعني ذلك أن أذواق تصميمها ستكون قديمة قبل أن تصبح صور الموقع الخاصة بها. على الرغم من أهمية الاقتراب منها بعيونك المفتوحة ، إلا أنه من الواضح تمامًا أن نرى كيف يمكن لرسومات SVG أن تقربك من مستقبل الاستقلال التام.
عند تحميل موقع تم تمكين SVG على جهاز عالي الدقة مثل جهاز iPad 3 ، وقمت بالتكبير ، سيتم بيعه.
آمل أن تذهب هذه المقالة إلى حد ما نحو تشجيع حل التفكير المستقل في تصميم الويب وتطويره ، وآمل أن يكون قد شجع بعضكم على التفكير في كيفية عمل SVG لموقعك القادم.
لقد كنت في تجمع SVG لفترة من الوقت ، ويجب أن أقول ، لم تكن المياه أكثر جمالا.
هل تقوم بتحويل SVG أو هل تقدم صورًا نقطية محجوبة لشاشات Retina؟ هي ناقلات مستقبل رسومات الويب؟ اسمحوا لنا أن نعرف في التعليقات.