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

Christopher Gammon
Christopher Gammon

בעזרת הכלים של CSS ותצוגת הדפדפן אפשר ליצור תצוגות חזותיות מדהימות של תוכן אינטרנט. שימוש בתכונות אינטרנט כמו מסנני CSS, WebGL, וידאו HTML5, SVG, Canvas וטכנולוגיות עתידיות מתפתחות כמו אזורים ב-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 ב-float, אפשר להגדיר את הגיאומטריה שמאפשרת לתוכן שלנו להתעטף בצורה הדוקה סביב הצורה של הדמות.

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

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

תמונה של אות ראשית גדולה

צורות

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

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

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
תמונה של צורות CSS

טקסט מאוזן

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

זהו בדיוק המקום שבו אנחנו משתמשים בטקסט מאוזן במאמר. מכיוון שהתכונה הזו היא תקן ש-Adobe מציעה, אנחנו משתמשים ב-polyfill שנוצר על ידי Randy Edmunds כדי להשיג את אותן תוצאות. התכונה הזו נראית בצורה הטובה ביותר בתיקים עם תצוגה רספונסיבית. כשמשנים את גודל הדפדפן, רואים שהבלוק ממשיך לאזן את הטקסט כדי שהשורות יהיו בערך באותו רוחב. קל להשתמש ב-polyfill של טקסט מאוזן, כי זהו פלאגין של jQuery. כל מה שצריך לעשות הוא להחיל את 'balanceText()‎' על בורר כשהפריסה משתנה, וכך נקבל טקסט מאוזן שנראה כך:

$('.balance').balanceText();
תמונת טקסט מאוזנת

סינון מעברים

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

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

מסננים מותאמים אישית נכתבים באמצעות GLSL, אותה שפת צללה כמו WebGL. הם מאפשרים לכם להחיל את השיזועורים האלה על רכיבי DOM באמצעות CSS, וכך ליצור אפקטים מורכבים של שילוב ועיוות תלת-ממדי. בתחתית האתר, כשלוחצים על 'הצגת עץ הנשיאים', הדף מתקפל כדי לחשוף קטע נוסף מתחתיו. זו רק דוגמה אחת לאופן שבו מסננים מותאמים אישית יכולים לאפשר מעברים עשירים בין תכנים. אפשר ליצור את האנימציה באמצעות מעברים ב-CSS. עם זאת, אם אתם רוצים להשתמש באנימציות או באינטראקציות חזקות יותר ממה שמאפשרים המעברים, תוכלו להעביר ערכים לשיחדר (shader) על ידי הגדרת הסגנון באמצעות JavaScript, כפי שמתואר בהמשך. כך תוכלו לשלוט בצורה מדויקת יותר בהאצה או אפילו לאפשר לשיטות של קלט משתמש לבצע מניפולציה על ה-shader.

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.

תמונה של עץ ענק

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

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