چیدمان وب نسل بعدی - غول جنگل نشنال جئوگرافیک

Christopher Gammon

استفاده از ابزارهای CSS و چیدمان مرورگر می تواند تجسم های خیره کننده ای را برای محتوای وب فعال کند. استفاده از ویژگی‌های وب مانند فیلترهای CSS، WebGL، ویدیوی HTML5، SVG، بوم و فناوری‌های در حال تکامل آینده مانند مناطق CSS، شکل‌های CSS و فیلترهای سفارشی CSS نوید یک چشم‌انداز خلاقانه بسیار گسترده را می‌دهد. Adobe سابقه طولانی در کار با سازندگان محتوا داشته است که علاقه زیادی به چیدمان و طراحی دارند، و به همین دلیل در به کارگیری این دانش در وب با کمک به بسیاری از استانداردهای در حال تحول وب فعال بوده است.

با کمک نشنال جئوگرافیک، ما از محتوای ویژگی آنها با عنوان "غول جنگل" برای ساختن یک نمونه اولیه استفاده کردیم که نشان می دهد چگونه این ویژگی ها می توانند چیدمان وب غنی و تکنیک های پاسخگو را فعال کنند. این مقاله نشان می دهد که چگونه ما برخی از ویژگی های خاص جالب سایت را ساختیم. برای یک نمای کلی مختصر، ارزش دیدن این ویدیوی زیر را دارد که در آن کریستین کانترل شما را از طریق ویژگی های مختلف سایت راهنمایی می کند.

ظرافت های Layout

آنچه که چیدمان عالی را تشکیل می دهد و ویژگی های پشت آن می تواند ظریف باشد، بنابراین ما یک "همپوشانی ویرایشگر" ایجاد کردیم که ویژگی های قابل توجه تر را برجسته می کند. برای فعال کردن علائم ویرایشگر، روی نوار در پایین مقاله کلیک کنید.

طرح مستقل

امروزه در وب، طرح‌بندی غالباً توسط محتوای ما دیکته می‌شود و ظرف‌هایی که به‌صورت عمودی بزرگ می‌شوند تا متن را متناسب کنند. هنگام ایجاد طرح‌بندی‌های پیچیده، تغییرات در کپی یا سایر محتواها می‌تواند تأثیر ناخواسته‌ای بر طرح‌بندی کلی داشته باشد و نیاز به طراحی مجدد محتوا بر اساس تغییرات غیرمنتظره را ایجاد کند. با منطقه‌ها، می‌توانیم با تعریف یک عنصر به عنوان محتوای خود، و سپس مشخص کردن بخش‌هایی از طرح‌بندی که می‌خواهیم آن محتوا در آن جریان پیدا کند، محتوای خود را از طرح‌بندی جدا کنیم.

در مثال "غول جنگل" ما داستان را در یک عنصر واحد داریم. سپس، در سرتاسر صفحه، داربست طرح بندی خود را داریم که از عکس ها و قسمت های متنی تشکیل شده است. با CSS، عناصری را که می‌خواهیم محتوا از طریق آن جریان پیدا کند، تعریف می‌کنیم. وقتی کپی به انتهای یک عنصر رسید، به ترتیب DOM به عنصر بعدی ادامه می‌دهد. این به ما این امکان را می‌دهد که با ستون‌های خود واقعاً خلاق باشیم، آنها را تغییر دهیم و ارتفاع آنها را بر اساس طرح تطبیق دهیم، بدون نگرانی از اینکه متن با ارتفاع عنصر مطابقت دارد یا بیشتر از آن. همچنین به ما این امکان را می دهد که عناصری را در طرح خود داشته باشیم، مانند تصاویر تمام عرض، در حالی که داستان همچنان در آن جریان دارد.

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

در CSS بالا، ما در حال ایجاد یک جریان به نام "story" هستیم. محتوای این جریان نامگذاری شده عنصری با شناسه "storyContent" است. سپس در تمام عناصر با نام کلاس "story" جریان می یابد. مناطق CSS ابزاری عالی برای طراحی واکنش‌گرا هستند که به ویژگی‌هایی مانند ستون‌های چند ستونی و ستون‌های افست برای طرح‌بندی غنی در صفحه‌های بزرگ و در عین حال تنظیم به طرح تک ستونی در صفحه‌های کوچکتر اجازه می‌دهند. با منطقه‌ها می‌توانید اندازه منطقه خود را با واحدهای واکنش‌گرا مانند vw یا vh نیز تنظیم کنید. این می تواند برای اطمینان از اینکه ستون ها از ارتفاع نمای در طرح شما تجاوز نمی کنند، بدون نگرانی در مورد قطع شدن محتوا استفاده می شود، زیرا به طور طبیعی به عنصر بعدی در زنجیره منطقه جریان می یابد.

رها کردن کلاه

CSS Exclusions به ما اجازه می دهد تا متن را در اطراف یا درون اشکال نامنظم قرار دهیم. این می تواند برای شکوفایی طراحی مانند کلاهک های قطره ای مفید باشد. دراپ کلاه یک روش طراحی رایج است که در آن حرف اول یک داستان یا فصل بزرگ می‌شود و به بقیه متن اجازه می‌دهد تا دور خط شخصیت بپیچد. این اثر بسیار شبیه به نحوه پیچیدن محتوای درون خطی در اطراف شناورها است، اما با استثناء، ما دیگر محدود به جعبه های مستطیلی نیستیم. با استفاده از شکل بیرونی روی یک شناور، می‌توانیم هندسه‌ای را تعریف کنیم که به محتوای ما اجازه می‌دهد تا شکل شخصیت ما را محکم بپیچد.

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

این یک بیضی ایجاد می کند که به محتوا اجازه می دهد تا دور شکل دایره ای بپیچد. همچنین چون از واحدهای نسبی برای شکل استفاده می کنیم، تغییر اندازه عنصر در اندازه شکل منعکس می شود.

شکل ها

همراه با دراپ کلاه ها، استثناها توانایی قرار دادن متن درون اشکال را با استفاده از شکل درونی به ارمغان می آورند. ما از این ویژگی در سرتاسر سایت استفاده می‌کنیم، به‌ویژه با زیرنویس‌های بزرگ تصاویر، از فضای منفی عکس‌ها برای کادربندی متن استفاده می‌کنیم. همچنین به ما این امکان را می‌دهد که متن را در امتداد خطوط دیگر تصاویر و طرح‌بندی‌های گرافیکی شبیه‌سازی کنیم که قبلاً دستیابی به آن در وب بسیار دشوار بود.

Shape ها همچنین می توانند با طرح بندی های پاسخگو با استفاده از واحدهای نسبی برای تعریف شکل شما کار کنند. به این ترتیب می‌توانیم شکل‌هایی بسازیم که بر اساس کانتینر یا viewport کشیده شوند و حتی از پرس‌وجوهای رسانه‌ای برای تغییر کامل شکل یا حذف آن استفاده کنیم، زیرا همه آن‌ها در CSS تعریف شده‌اند. در زیر مثالی از یکی از شکل های چند ضلعی است که در سایت با مقادیری که نقاط را تعریف می کنند استفاده می شود:

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

متن متعادل

متن متوازن قابلیتی است که به جای بسته بندی کلمه به کلمه، کل متن را در یک عنصر در هنگام بسته بندی خطوط بررسی می کند. از موقعیت هایی که در یک خط یک یا دو کلمه داریم با شکستن خطوط متن برای رسیدن به خطوطی با اندازه یکنواخت در یک عنصر اجتناب می کند. این سطح از کنترل به ما این امکان را می دهد که به راحتی بلوک های متنی از نظر زیبایی شناختی ایجاد کنیم، به خصوص برای اجرای کوتاه مانند نقل قول ها یا زیرنویس ها.

این دقیقاً همان جایی است که ما از متن متعادل در مقاله استفاده می کنیم. از آنجایی که این ویژگی استانداردی است که Adobe پیشنهاد می‌کند، ما از یک polyfill ایجاد شده توسط Randy Edmunds برای دستیابی به نتایج مشابه استفاده می‌کنیم. این ویژگی به بهترین وجه در موارد ریسپانسیو دیده می شود. هنگام تغییر اندازه مرورگر، متوجه خواهید شد که بلوک به تعادل متن ادامه می دهد تا خطوطی با عرض تقریباً یکسان ایجاد شود. استفاده از polyfill متن متعادل آسان است، زیرا یک پلاگین جی کوئری است، تنها کاری که باید انجام دهیم این است که وقتی طرح بندی تغییر می کند، 'balanceText()' را به یک انتخابگر اعمال می کنیم و متنی به خوبی متعادل می کنیم، که به نظر می رسد:

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

انتقال فیلتر

انتقال ها راه مهمی برای جلب توجه کاربر و برقراری ارتباط با وضعیت موجود در سایت شما هستند. با شفافیت - و اخیراً، تبدیل‌های سه‌بعدی - شاهد استفاده از آن‌ها برای ایجاد انتقال‌ها و انیمیشن‌های زیبا در حین حرکت کاربران یا تعامل با بخش‌هایی از سایت شما هستیم. ما اکنون فیلترهایی داریم که می توانند برای همین منظور استفاده شوند.

در "غول جنگل"، ما از فیلترها برای محو شدن از مقیاس خاکستری به رنگ هنگام مشاهده برخی از تصاویر استفاده می کنیم. این فیلترها را می توان با کدورت یا فیلترهای دیگر ترکیب کرد تا جلوه ها و انتقال های تصویری پیچیده ایجاد کند. ما می توانیم از قدرت فیلترهای سفارشی برای افزودن جلوه های چشمگیرتر استفاده کنیم.

فیلترهای سفارشی با استفاده از GLSL نوشته می‌شوند، همان زبان سایه‌زنی WebGL. آنها به شما این امکان را می‌دهند که از طریق CSS، این سایه‌زن‌ها را روی عناصر DOM اعمال کنید و افکت‌های ترکیبی پیچیده و اعوجاج سه بعدی را ممکن می‌سازند. در پایین سایت، هنگامی که روی «کاوش در درخت رئیس» کلیک می‌کنید، صفحه را می‌بینید که به هم می‌خورد تا بخش دیگری در زیر آن نمایان شود. این فقط یک نمونه از این است که چگونه فیلترهای سفارشی می توانند انتقال غنی بین محتوا را امکان پذیر کنند. انیمیشن را می توان با استفاده از انتقال CSS به دست آورد. با این حال، اگر می‌خواهید از انیمیشن‌ها یا تعاملات قوی‌تر از آنچه که انتقال اجازه می‌دهد استفاده کنید، می‌توانید با تنظیم استایل با جاوا اسکریپت همانطور که در زیر می‌بینید، مقادیر را به سایه‌زن خود منتقل کنید. این می‌تواند به شما اجازه دهد تا کنترل دانه‌ای بیشتری روی آسان‌سازی داشته باشید یا حتی به روش‌های ورودی کاربر برای دستکاری سایه‌زن اجازه دهید.

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)");
}

فیلتر ما برای اعمال افکت، محتوا را به‌عنوان یک بافت روی GPU شطرنجی می‌کند. به همین دلیل، باید مطمئن شویم که پس از اتمام آن را حذف کنیم، در غیر این صورت ممکن است محتوای ما تار به نظر برسد.

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

فیلترهای سفارشی CSS جلوه‌های جالبی مانند بسته‌بندی صفحه که به نظر می‌رسد صفحه‌ای در یک کتاب واقعی ورق می‌خورد را فعال می‌کنند. آنها یک توسعه دهنده وب را قادر می سازند تا جلوه های پیچیده را به زبانی به نام GLSL برنامه ریزی کند و آن را روی محتوای وب اعمال کند. برای اطلاعات بیشتر در مورد جزئیات فیلترهای سفارشی، همه آن پارامترها و نحوه استفاده از آنها، این آموزش عالی را بررسی کنید.

پیش رندر بافت در WebGL

جواهر این مقاله اولین تصویر کامل از «رئیس جمهور» بود که گمان می رود دومین درخت بزرگ جهان از نظر حجم باشد. این تصویر با دوخت صدها عکس از درخت برای ایجاد یک تصویر کامل ایجاد شده است. ما می‌خواستیم این فرآیند را با شکستن تصویر به دسته‌ای از عکس‌های کوچک که برای ایجاد تصویر کامل در جای خود قرار می‌گیرند، شبیه‌سازی کنیم. این با استفاده از WebGL، به‌ویژه با کتابخانه Three.js که یک بسته‌بندی API سطح بالاتر در اطراف WebGL است، به دست آمد.

رندر کردن تعداد زیادی بافت می‌تواند به سرعت هر بار که یک بافت جدید سعی می‌کند روی صفحه ترسیم کند، مشکلات عملکردی ایجاد می‌کند، بدون اینکه به درخواست‌های شبکه اضافی اشاره کنیم. برای کاهش این امر، بافت های خود را تا حد امکان بزرگ کردیم و آنها را برای هر کاشی جبران کردیم. این تکنیک اغلب به عنوان Sprite Mapping شناخته می شود و در توسعه بازی رایج است. این منجر به سه بافت بزرگ برای کل درخت شد. برای خلاص شدن از ضربات پرفورمنس هر بار که یکی از بافت ها برای اولین بار روی صفحه قابل مشاهده می شود، قبل از شروع انیمیشن، مربع های 1 پیکسلی را با هر یک از بافت ها رندر می کنیم و ضربه اجرا را به ابتدا منتقل می کنیم. این به ما این امکان را می‌دهد که حتی بر روی یک تبلت، تمام ارتفاع درخت را به آرامی پرواز کرده و متحرک کنیم.

برای خنثی کردن بافت‌ها، 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، Exclusions، متن متعادل، فیلترهای سفارشی و WebGL، تولیدکنندگان محتوا دیگر نیازی به انتخاب بین دسترسی و کیفیت طراحی ندارند. "غول جنگل" نشانه روشنی است که وب آینده هر دو را امکان پذیر خواهد کرد.