كيفية الطلب

1 تسجيل الدخول أو إنشاء حساب جديد.
2 راجع طلبك أو اطلب خدمة جديدة.
3 تأكيد الدفع

إذا كنت لا تزال تواجه مشكلات ، فالرجاء إخبارنا بذلك عن طريق إرسال بريد إلكتروني إلى support@natchcenter.com . شكراً لك!

ساعات العمل

الإثنين-للجمعة 9:00AM - 20:00PM
السبت - 9:00AM-17:00PM
أيام الأحد عن طريق موعد مسبق فقط!

هل أنت مستعد لتصميم موقع اتش دي؟

من قبل NatchCenter / يون 17, 2018 / نشرت في التصميم
هل أنت مستعد لتصميم موقع اتش دي؟

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

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

عندما يتحدث Apple ، نستمع

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

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

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

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

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

رهانات أبل على درجة عالية من الدقة

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

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

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

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

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

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

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

المشكلة واضحة رغم ذلك ، تلك الصورة أعلاه تأتي في مجرد 72ppi في حين أن باد الجديد هو 264ppi! (وهذا يبالغ في تبسيط الحجة قليلاً ، اقرأ هذه المقالة للحصول على مزيد من المعلومات حول ما إذا كنت تشاهد الصور فعليًا عند 72ppi).

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

ما الذي تستطيع القيام به؟

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

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

Pure HTML & CSS Web Elements

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

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

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

 

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

من المهم ملاحظة أن الكائنات التي تم تقديمها باستخدام قماش HTML5 و JavaScript يمكن أن تحقق قابلية مماثلة.

SVG

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

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

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

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

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

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

قرار الاستقلال مع SVG

استخدام SVG For Flexible، Scalable، Fun Backgrounds ، الجزء الأول

اللعب مع تصميم SVG

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

 

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

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

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

 

ماذا عن HTML الصور المدمجة؟

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

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

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

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

استنتاج

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

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

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

تسجيل الدخول إلى حسابك للوصول إلى ميزات مختلفة

او استخدم وسائل التواصل

إنشاء حساب

نسيت معلومات الدخول؟

عرض سعر

سنفعل كل ما في وسعنا لجعل مشروعك أفضل مشروع لدينا!

إشترك معنا في الأخبار

سوف تتلقى إشعارات عن أحدث العروض والعروض الترويجية

لا تظهر هذا مرة أخرى!
TOP