أو ليست على استعداد، وهنا يأتي HD لتصميم المواقع

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

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

عندما يتحدث أبل، ونحن نستمع

لقد تم استخدام أجهزة ماكينتوش بأمانة منذ  أيام نظام التشغيل، وليس ما دام بعض المخضرمين لكن الكثير طويلة بما فيه الكفاية لشرب كول المساعدات وأدمنوا تماما على جميع الامور أبل.

أتذكر عندما ترى شعار أبل يعني أن المنتج كان شيئا من مكانة، قيمة عزلاء الا ان أفراد المجتمع عنيد المستخدمة في محاولة علنية للذهاب ضد التيار الرئيسي، ويندوز المحبة للثقافة.

وقال "اذا اخترت منزلا عشوائيا، والاحتمالات هي ستجد واحدة على الأقل بود، اي فون و / أو داخل باد".

من خلال تحول مؤثرة مبنية على التفاني من أجل ابتكار الجيل التالي من المنتجات، وأصبحت الشركة الآن القليل المستضعف الشركة الأكثر قيمة على هذا الكوكب. قد لا يكون هناك جهاز ماكنتوش على كل سطح المكتب في أمريكا، ولكن إذا اخترت منزلا عشوائيا، والاحتمالات هي ستجد واحدة على الأقل بود، اي فون و / أو داخل باد.

أنا لست الصبح ببلاغة من أجل تحويل لك عبادة بلدي، وأنا أريد ببساطة أن يثبت أن أبل هي المحرك وشاكر في صناعة التكنولوجيا. لا احد يهتم ما الجديد باحتوائه على نيوتن خرج بها، ولكن عندما أبل تطلق جهاز جديد دائرة الرقابة الداخلية، في العالم يتوقف ويستمع بصبر لماذا المعالجات في حلقة لا نهائية هي التي تقول لنا في المستقبل سيبدو.

الرهانات ابل على الدقة الرفيع

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

بالنسبة للجزء الاكبر رغم ذلك، بقي هذا الاتجاه بعيدا عن الحوسبة. من المؤكد أن هناك كبير، ويعرض السينما رائع ولكن كثافة بكسل لم يكن من النوع الذي يتطلب نقلة نوعية كبيرة. وهذا هو، حتى وقت قريب.

عندما الآيفون 4 انخفض في منتصف عام 2010 وجاء ذلك مع مفاجأة: ال "شبكية العين" الشاشة، الذي فجر لنا بعيدا عن طريق مضاعفة قرار القديمة مع 326 بكسل لكل بوصة مذهل (للمقارنة، وهي 27 "إيماك هو 109ppi). وكانت هذه لعبة تبديل. كان هناك الكثير من التكهنات بأن توسيع نطاق هذه التكنولوجيا بأسعار معقولة سيكون من المستحيل تقريبا، ولكن آبل لم تفعل هذا الشيء جدا من خلال مضاعفة أيضا القرار المتعلق باد الجيل الثالث، والتي تأتي في في 264ppi أقل قليلا ولكن لا يزال رائع.

لماذا هذه التغييرات تماما كيف يمكنك القيام بعملك

ماذا في ذلك؟ شكرا للدرس التاريخ، ولكن هذا هو بلوق تصميم، أليس كذلك؟ الذي يهتم كثافة البكسل لباد؟ كما مصمم على شبكة الإنترنت، لديك، سواء كنت تعرف ذلك حتى الآن أم لا.

المشكلة هو واضح هنا في هذا الموقع، وكذلك أي أن عليك أن زيارة اليوم. المضي قدما، والاستيلاء على صورة من شبكة الإنترنت، وفتحه في برنامج فوتوشوب. جلب الآن في الحوار حجم الصورة. ترى أي شيء للاهتمام؟

مصممي المواقع الإلكترونية وكان دائما ميزة صغيرة لطيفة لاكثر من مصممي الطباعة: يمكننا استخدام منخفض الفني القرار. لماذا هو ميزة وليس عيب؟ لأن عناصر أمنية عالية الدقة الطبقات يمكن أن يبطئ جهازك الى الزحف وعالية الدقة صور تكلف مالا أكثر بكثير، عالية الدقة الصور اتخاذ إلى الأبد لتحميل من خلال شبكة الإنترنت، والقائمة تطول وتطول.

المشكلة هي واضحة على الرغم من أن الصورة أعلاه يأتي في في 72ppi مجرد بينما تطلب الشركة الجديدة هو 264ppi!

نفكر في ما يعنيه ذلك. ابل يحتوي يعرض شبكية العين على خط دائرة الرقابة الداخلية كاملة: آي بود تاتش، اي فون وتطلب الشركة. وهذا يعني أن الملايين من الناس الذين يتصفحون شبكة الإنترنت كل يوم على شاشات عالية الدقة التي من شأنها أن لا يتم عرض الصور بشكل صحيح. لا نخطئ، وهذا الاتجاه يزداد سوءا ومصنعي الأجهزة الأخرى تلعب اللحاق بالركب وأبل ويستكشف سبل التوصل إلى كثافة أكثر بكسل إلى مكان ما هو واضح بعد ذلك: كمبيوتر محمول في السوق.

ماذا يمكنك ان تفعل؟

مشكلة كثافة بكسل مثيرة للاهتمام. على شبكة الإنترنت يمثل العديد من التقنيات المختلفة بحيث تأتي معا في وئام أنه يمكن أن يكون فوضوي إذا كان واحد من هذه التقنيات يدير قدما ويزعزع التوازن.

نحن نشهد ظهور الشاشات دقة أعلى، ولكن فقط تم تحسين المحتوى لدينا للشاشات القديمة. مزيد من التفكير في كيفية مجنون مطوري الويب على وشك مرات تحميل الصفحة مع الصور منخفضة الدقة، والآن تخيل كم من تباطؤ كنت أحصل على موقع صورة الثقيلة مثل Pinterest إذا امتلأت فجأة مع الصور 326ppi!

نقي HTML & CSS عناصر ويب

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

في هذه الأيام يتم تقديم أكثر العناصر واجهة المستخدم في المتصفح، وهو ما يعني أنها زيادة على ما يرام في أي الشاشة الذي رمي عليهم.

لتوضيح، وهنا ما يبدو عندما تكبير على الصورة القائمة على زر التحميل في 4  iPhone.

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

انه شيء جميل أليس كذلك؟ الأخلاقي هنا هو "imageless"  أن الاتجاه قد آتت أكلها على المدى البعيد، وقدمت لنا مع أقل من ذلك بكثير ما يدعو للقلق من كنا لقد كان شاشات شبكية العين بالرد عندما كنا الصور لالتدرجات، الظلال، وتدوير زوايا والى حد كبير أي التصميم المتقدمة الأخرى.

من المهم أن نلاحظ أن الكائنات المقدمة مع قماش HTML5 وجافا سكريبت يمكن أن تحقق التدرجية مماثلة.

SVG

SVG، أو رسومات المتجهات قابلة للتطوير، هي خطوة هامة أخرى على طريق استقلال القرار. وكانت هذه التكنولوجيا في جميع أنحاء لالأعمار ولكن في الآونة الأخيرة فقط شهدت عبر متصفح الدعم مع IE9 أخيرا القفز على عربة.

عندما أفكر في SVG أعتقد أن من أدوبي المصور. وتستخدم في المقام الأول هذا التطبيق لخلق ناقلات القائم على الرسومات مع قابلية لانهائية. في المقابل، SVG يجلب هذه الوظيفة نفسها لرسومات الويب.

ويمكن أن يكون أي شيء تقريبا يمكنك بناء في المصور وغيرها من تطبيقات تحرير ناقلات تصديره بسهولة كملف SVG وتنفيذها على شبكة الإنترنت ككائن للتحجيم.

الميزة هنا خلال CSS يبدو مشوشا في البداية ولكنه يصبح واضحا عندما كنت تعمل مع الصور المعقدة. فمن السهل إنشاء أزرار بسيطة مع المغلق ولكن عندما يأتي ليقول المبنى، وشعار ستاربكس، وأشياء حصول فوضى حقا ومعقدة.

كبديل لساعات وساعات من تافه المغلق وربما المئات من الأسطر من التعليمات البرمجية لكائن واحد (على افتراض انها ممكن حتى مع CSS)، هل يمكن تصدير مجرد نسخة ناقلات للشعار ستاربكس بوصفها SVG، وتضمين ذلك في الويب الخاص بك صفحة فقط في دقيقة أو دقيقتين! انقر هنا لرؤية مثال حي على ذلك. تأكد للتكبير مع + الأوامر ومشاهدة كيف أن موازين صورة تماما.

لمعرفة المزيد عن كيفية تنفيذ SVG في موقعك، وتحقق من هذه الموارد العظيمة:

• استقلال القرار مع SVG
• باستخدام SVG لخلفيات مرنة وقابلة للتطوير، والمرح، الجزء الأول
• لعب مع التصميم SVG

ولكن ماذا عن الصور؟

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

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

في الوقت الراهن، وهذا يعني تخدم ما يصل صور مختلفة لأجهزة مختلفة. هذا المصات، ولكن كنت لا تريد أن تجعل من غير شبكية العين على شاشات الحمل في تلك الصور الضخمة والتي لا تريد أن تخدم حتى مرضية تماما، فيرجى الصور إلى شاشات شبكية العين، لذلك هذا هو الحل الوحيد.

ويمكن تحقيق هذا من خلال استفسارات وسائل الإعلام، وميزة الجهاز بكسل نسبة. كمثال على ذلك، هال Gatewood يبين لنا كيف يمكننا استهداف باد الجيل الثالث:

  @ وسائل الإعلام الشاشة فقط و (مين جهاز العرض: 1536px) و (حد أقصى، جهاز العرض: 2048px) و (-بكت مين على الجهاز بكسل نسبة-: 2) {
  DIV {خلفية: عنوان ('biggerphoto.jpg')؛}
 } 

ماذا عن الصور جزءا لا يتجزأ من HTML؟

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

لسوء الحظ، ليس هناك جواب حقيقي باستخدام HTML نقية. ولعل الحاجة أصبحت كبيرة لدرجة أننا سوف نرى شيئا من هذا القبيل في المستقبل، لكنه الآن، وكنت من الحظ.

الحل الوحيد هو اللجوء إلى شيء أكثر قوة مثل جافا سكريبت. Bdoran.co.uk لديه مثال سريع لكيفية الكشف عن اي فون 4 مع جافا سكريبت أو PHP التي يجب أن تقوم بمراجعة.

ويعرض هذا واضح على الرغم من المشاكل الضخمة لمصممي المواقع الإلكترونية الذين يحاولون التمسك HTML و CSS و ليسوا على دراية جافا سكريبت وغيرها من التقنيات المتقدمة. فجأة، ويمكن هذه المجموعة لم يقدم حتى محتوى بسيط في الطريقة التي يتم أمثل للعرض على معظم الأجهزة.

اختتام

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

عند هذه النقطة في وقت لدينا عدد قليل من دورات عمل للاستكشاف: HTML5 قماش، وجافا سكريبت، CSS3، SVG، واستفسارات وسائل الإعلام معا تشكل ترسانة الخاص بك من الأسلحة التي لمهاجمة المشكلة من المحتوى الخاص بك ينظر في ما يزيد عن 264ppi.

ونأمل في المستقبل القريب سنرى خيارات أكثر قوة يطفو على السطح لتخدم ما يصل مختلف HTML جزءا لا يتجزأ من الصور والفيديو إلى أجهزة الصحيح.

ترك التعليق أدناه وعلينا أن نعرف رأيك في كل هذا.