הדור הבא של פריסת האינטרנט - נשיונל ג'יאוגרפיק פורסט ענק

Christopher Gammon

השימוש בכלים מ-CSS ומפריסת הדפדפן יכול לאפשר תצוגות מדהימות של תוכן האינטרנט. השימוש בתכונות אינטרנט כמו מסנני CSS, WebGL, וידאו HTML5, SVG, בד ציור וטכנולוגיות מתפתחות בעתיד כמו אזורי CSS, צורות CSS ומסננים מותאמים אישית של CSS, מבטיח סביבת קריאייטיב נרחבת מאוד. ל-Adobe יש היסטוריה ארוכה של עבודה עם יוצרי תוכן שמביעים עניין רב בפריסה ובעיצוב, ולכן פעלה ליישום הידע הזה באינטרנט ותרם/ה לתרום לתקנים רבים באינטרנט.

בעזרת נשיונל ג'יאוגרפיק השתמשנו בתוכן מהתכונה 'יער ענק' כדי לבנות אב טיפוס שמציג כיצד תכונות אלה יכולות לאפשר פריסת אינטרנט עשירה וטכניקות רספונסיביות. המאמר הזה יראה כיצד בנינו כמה מאפיינים מעניינים במיוחד של האתר. לסקירה תמציתית כדאי לצפות בסרטון הזה שלמטה שבו כריסטיאן קנטרל מסביר על התכונות השונות של האתר.

הדקויות של הפריסה

מה נחשב לפריסה נהדרת ומהתכונות שמאחוריה יכולים להיות עדינים, לכן יצרנו "שכבת-על של עורך" שמדגישה את התכונות הראויות יותר. כדי להפעיל את סימני העורך, לוחצים על הסרגל שבתחתית המאמר.

עצמאית פריסה

כיום, הפריסה נקבעת על סמך התוכן שלנו באמצעות קונטיינרים שמגדילים את התצוגה אנכית כדי להתאים לטקסט. כשיוצרים פריסות מורכבות, לשינויים בעותק או בתוכן אחר יכולה להיות השפעה לא רצויה על הפריסה הכוללת, וכתוצאה מכך צריך לעצב מחדש את התוכן על סמך שינויים בלתי צפויים. בעזרת אזורים, אנחנו יכולים באמת להפריד בין התוכן שלנו לבין הפריסה על ידי הגדרה של רכיב בתור התוכן שלנו, ואז ציון החלקים בפריסה שאנחנו רוצים שהתוכן יעבור דרכם.

בדוגמה של 'יער ענק' יש לנו את הסיפור ברכיב אחד. לאחר מכן, לכל אורך הדף, יש לנו פיגומים חדשים שכוללים תמונות ואזורי טקסט. ב-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)");
}

כדי להחיל את האפקט, המסנן שלנו יוצר רסטר של התוכן כמרקם ב-GPU. לכן, חשוב עלינו להסיר את התוכן בסיום, אחרת התוכן שלנו עלול להיראות מטושטש.

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

מסננים מותאמים אישית של CSS מאפשרים אפקטים מעניינים כמו גלישת דף שנראית כמו היפוך דף בספר אמיתי. הם מאפשרים למפתח אתרים לתכנת אפקטים מורכבים בשפה שנקראת GLSL ולהחיל אותה על תוכן באינטרנט. למידע נוסף על הפרטים של מסננים מותאמים אישית, על כל הפרמטרים האלה ועל אופן השימוש בהם, מומלץ לעיין במדריך הנהדר הזה.

עיבוד מראש של טקסטורות ב-WebGL

היהלום במאמר זה היה התמונה השלמה הראשונה של 'הנשיא', שנחשב לעץ השני בגודלו בעולם לפי נפח. התמונה הזו נוצרה על ידי תפירה של מאות תמונות של העץ כדי ליצור תמונה מלאה. רצינו לדמות את התהליך על ידי פיצול התמונה לכמה תמונות קטנות שעופפות למקומן כדי ליצור את התמונה המלאה. אתם משיגים את המטרה הזו באמצעות WebGL, במיוחד באמצעות ספריית Three.js, שהיא wrapper ברמה גבוהה יותר של API סביב WebGL.

עיבוד מספר גדול של מרקמים עלול לגרום במהירות לבעיות ביצועים בכל פעם שמרקם חדש מנסה לשרטט על המסך, וכמובן גם בקשות רשת נוספות. כדי להפחית את ההשפעה, הגדרנו את המרקמים שלנו גדולים ככל האפשר וקיזזנו אותם עבור כל אריח. שיטה זו נקראת בדרך כלל מיפוי Sprite, והיא נפוצה בפיתוח משחקים. כתוצאה מכך נוצרו שלושה מרקמים גדולים לעץ כולו. כדי להיפטר מפגיעה בביצועים בכל פעם שאחד מהמרקמים מופיע לראשונה במסך, אנחנו מעבדים ריבועים בגודל פיקסל אחד עם כל אחד מהמרקמים לפני שהאנימציה מתחילה, ומעבירים את היט הביצועים להתחלה. כך אנחנו יכולים לטוס לכל אורך העץ וליצור אנימציה בצורה חלקה, גם בטאבלט.

כדי לקזז את המרקמים, אנחנו משנים את הקרניים המקריות 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 של המרקם. ניתן להשיג את אותה האפקט באמצעות חומר הצללה (shader) מותאם אישית של GLSL שמשנה את הקואורדינטות המשורטטות בגיאומטריה.

תכונות ניסיוניות

חלק מהתכונות שבהן ההדגמה משתמשת עדיין ניסיוניות, ולכן יש להציג את המאמר ב-Chrome Canary ולהפעיל את כל הדגלים שצוינו עבור Chrome Canary באתר הזה.

אחרי שמתקינים את Chrome Canary ומוגדרים כראוי, אפשר לבדוק את ההדגמה. (שימו לב שהפרויקט כולו הוא קוד פתוח וזמין ב-GitHub).

סיכום

בדקנו גם את אופן השימוש בתכונות האלה בהקשר של אפליקציות לנייד, בדומה לספר דיגיטלי. תוכלו לראות את אב הטיפוס הזה בתהליך ולראות כיצד אנחנו מנצלים את הפרדיגמות השונות של האינטראקציה והמגע כדי להציג את התכונות האלה בטאבלט.

מאחר שהפריסה של דפדפן האינטרנט מתפתחת כל הזמן, אנחנו רואים את הרצון להמשיך את ערך ההפקה ואת איכות הפריסה שהתרגלנו אליהם בעבר עם תוכן קריאה מדור קודם. תכונות כמו 'אזורים ב-CSS', החרגות, טקסט מאוזן, מסננים מותאמים אישית ו-WebGL, כבר לא יצטרכו לבחור בין פוטנציאל החשיפה לבין איכות העיצוב. 'ענק היער' הוא סימן ברור לכך שהאינטרנט של העתיד יאפשר את שניהם.