تخطيط الويب للجيل القادم - National Geographic Forest Giant

يمكن استخدام أدوات CSS وتنسيق المتصفّح لإنشاء عروض مرئية مذهلة لمحتوى الويب. من خلال استخدام ميزات الويب، مثل فلاتر CSS وWebGL وفيديو HTML5 وSVG واللوحة والتكنولوجيا المستقبلية المتطوّرة، مثل مناطق CSS وأشكال CSS والفلاتر المخصّصة لـ CSS، يمكنك إنشاء تصاميم إعلانية متنوعة بشكل كبير. لطالما تعاونت Adobe مع صنّاع المحتوى المهتمين بالتصميم والتنسيق، لذا شاركت بنشاط في تطبيق هذه المعرفة على الويب من خلال تقديم مساهمات في العديد من معايير الويب المتطوّرة.

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

التفاصيل الدقيقة للتصميم

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

صورة علامات المحرر

مستقلة عن التصميم

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

في مثال "عملاق الغابة"، تتضمّن القصة عنصرًا واحدًا. بعد ذلك، نضع في جميع أنحاء الصفحة إطارًا للتنسيق يتكوّن من الصور ومناطق النص. باستخدام CSS، نحدّد العناصر التي نريد أن يتدفق المحتوى من خلالها. عندما تصل النسخة إلى نهاية عنصر، تنتقل إلى العنصر التالي في ترتيب نموذج العناصر في المستند (DOM). يتيح لنا ذلك استخدام إبداعنا في الأعمدة، وإزاحتها وتعديل ارتفاعها استنادًا إلى التصميم، بدون القلق بشأن ما إذا كان النص سيلائم ارتفاع العنصر أو يتجاوزه. ويسمح لنا أيضًا بإضافة عناصر داخل التصميم، مثل الصور بالعرض الكامل، مع مواصلة عرض القصة.

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

في ملف CSS أعلاه، ننشئ مسارًا مُعنوَنًا باسم "story". محتوى هذه العملية المُسمّاة هو العنصر الذي يحمل المعرّف "storyContent". ثم يتم تطبيق ذلك على جميع العناصر التي تحمل اسم الفئة "story". مناطق CSS هي أداة رائعة للتصميم المتجاوب مع مختلف الأجهزة، إذ تتيح ميزات مثل الأعمدة المتعددة والأعمدة المُعدَّلة لإنشاء تخطيط غني على الشاشات الكبيرة مع التعديل على تخطيط عمود واحد على الشاشات الأصغر حجمًا. باستخدام المناطق، يمكنك أيضًا ضبط حجم منطقتك باستخدام وحدات متجاوبة مثل vw أو vh. ويمكن استخدام هذا الإجراء لضمان عدم تجاوز الأعمدة لارتفاع مساحة العرض في التنسيق، بدون القلق بشأن اقتطاع المحتوى، لأنّه سيتدفق بشكل طبيعي إلى العنصر التالي في سلسلة المناطق.

أحرف كبيرة في بداية السطر

تتيح لنا استثناءات CSS لف النص حول أشكال غير منتظمة أو داخلها. ويمكن أن يكون ذلك مفيدًا في التصاميم المميّزة، مثل الأحرف الكبيرة الأولى. إنّ الأحرف الكبيرة المميّزة هي من الممارسات الشائعة في التصميم، حيث يتم تكبير الحرف الأول من قصة أو فصل، ما يسمح لبقية النص بالالتفاف حول محيط الحرف. يشبه هذا التأثير إلى حد كبير طريقة التفاف المحتوى المضمّن حول العناصر العائمة، ولكن باستخدام الاستبعادات، لم يعُد علينا الاكتفاء بالمربّعات. باستخدام shape-outside في عنصر عائم، يمكننا تحديد الشكل الهندسي الذي يسمح للمحتوى بالالتفاف بإحكام حول شكل الشخصية.

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

سيؤدي ذلك إلى إنشاء شكل بيضاوي يسمح للمحتوى باللف حول الشكل الدائري. وبما أنّنا نستخدم وحدات نسبية للشكل، سيؤدّي تغيير حجم العنصر إلى تغيير حجم الشكل.

صورة الحرف الأول الكبير

الأشكال

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

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

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
صورة أشكال CSS

نص متوازن

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

هذا هو المكان الذي نستخدم فيه "النص المتوازن" في المقالة. وبما أنّ هذه الميزة هي معيار تقترحه Adobe، نستخدم polyfill أنشأه "راندي إدموندز" لتحقيق النتائج نفسها. تظهر هذه الميزة بشكل أفضل في الحالات التي تتضمّن عناصر سريعة الاستجابة. عند تغيير حجم المتصفّح، ستلاحظ أنّ الكتلة تستمر في موازنة النص لإنشاء أسطر بالعرض نفسه تقريبًا. من السهل استخدام تقنية polyfill للنص المتوازن، لأنّها عبارة عن مكوّن إضافي في jQuery، وكل ما علينا فعله هو تطبيق "balanceText()" على أداة اختيار عند تغيير التنسيق، وسنحصل على نص متوازن بشكل جيد، على النحو التالي:

$('.balance').balanceText();
صورة نص متوازنة

فلترة الانتقالات

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

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

تتم كتابة الفلاتر المخصّصة باستخدام GLSL، وهي لغة التظليل نفسها المستخدَمة في WebGL. وتسمح لك هذه التأثيرات بتطبيقها على عناصر واجهة DOM من خلال CSS، ما يتيح لك استخدام تأثيرات الدمج المعقّدة والتشويه الثلاثي الأبعاد. في أسفل الموقع الإلكتروني، عند النقر على "استكشاف شجرة الرئيس"، سترى الصفحة تُطوى للكشف عن قسم آخر تحتها. هذا مجرد مثال واحد على كيفية السماح للفلاتر المخصّصة بإجراء انتقالات غنية بين المحتوى. يمكن إنشاء الحركة باستخدام انتقالات CSS. ومع ذلك، إذا كنت تريد استخدام صور متحركة أو تفاعلات أكثر فعالية مما تسمح به الانتقالات، يمكنك تمرير القيم إلى أداة التظليل من خلال ضبط النمط باستخدام JavaScript كما هو موضّح أدناه. يمكن أن يتيح لك ذلك التحكّم بشكل أدق في التأثيرات الناعمة أو حتى السماح للمستخدم بتحديد طرق التحكّم في مؤثرات التظليل.

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

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

$("#map").css("webkitFilter", "none");

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

صورة قلب الصفحة

زخارف التقديم المُسبَق في WebGL

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

صورة شجرة عملاقة

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

لتصحيح الأنسجة، سنغيّر وحدات UV التي تربط النسيج بالشكل الهندسي. في Three.js، يبدو الأمر على النحو التالي:

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

يمكنك هنا الاطّلاع على أنّنا نستخدم متغيّرًا لتمويه x وy للّوحة. يمكن تحقيق التأثير نفسه باستخدام مادة مخصّصة لمخطّط الإضاءة GLSL تعمل على تعويض الإحداثيات المرسومة على الأشكال الهندسية.

الميزات التجريبية

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

بعد تثبيت Chrome Canary وضبطه بشكلٍ صحيح، انتقِل إلى الاطّلاع على العرض التجريبي. (يُرجى العِلم أنّ المشروع بأكمله مفتوح المصدر ومتاح على GitHub).

الخاتمة

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

مع التطور المستمر لتنسيق متصفّح الويب، نلاحظ الرغبة في مواصلة الحفاظ على قيمة الإنتاج وجودة التنسيق التي اعتدنا عليها في السابق مع محتوى القراءة القديم. من خلال ميزات مثل مناطق CSS والاستبعادات والنصوص المتوازنة والفلاتر المخصّصة وWebGL، لن يضطر صنّاع المحتوى بعد الآن إلى الاختيار بين مدى الوصول إلى الجمهور وجودة التصميم. يُعدّ "عملاق الغابة" علامة واضحة على أنّ الويب في المستقبل سيتيح كلا الخيارَين.