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

Christopher Gammon

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

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

التفاصيل الدقيقة للتخطيط

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

تخطيط مستقل

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

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

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

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

أغطية واقية للرأس

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

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

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

أشكال

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

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

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

نص متوازن

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

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

$('.balance').balanceText();

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

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

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

تتم كتابة الفلاتر المخصّصة باستخدام 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.

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

لتعويض الزخارف، نعمل على تعديل الأشعة فوق البنفسجية التي تحدد الشكل الهندسي. في 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، لن يحتاج صنّاع المحتوى بعد الآن إلى الاختيار بين مدى الوصول إلى الجمهور وجودة التصميم. ويشكّل "Forest Giant" إشارة واضحة إلى أنّ شبكة الويب في المستقبل ستتيح استخدام كليهما.