‫Htm - אחלה טיפים לבניית אתרים » CSS‬

‫מצגות וקטעי וידאו ממפגש המפתחים השלישי‬

‫אורן רוט‬ — Thu, 29 Apr 2010 11:35:59 +0000

שיפור הדרגתי (Progressive Enhancement) – גישור הפער בין CSS2 ו-CSS3 – זהר ארד

מצגת ההרצאה:

להורדת הקובץ בפורמט PDF

Accessibility with CSS – Lisa Seeman

מצגת ההרצאה:

להורדת הקובץ בפורמט PPT

מקומם של הפונטים בעולם האתרים – אורן רוט

מצגת ההרצאה:

להורדת הקובץ בפורמט PDF

introduction to CSS3: a showcase of things to come – Akiva Levy

עוד באותו נושא:

‫סיכום מפגש מפתחים מס' 3 – W3C ישראל‬

‫אורן רוט‬ — Wed, 28 Apr 2010 20:36:36 +0000

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

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

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

לפני שאני עובר לחלק בו יש קישורים ואת המצגת שלי (בקרוב יעלו גם צילומי הוידאו של ההרצאות במפגש), אני חייב להגיד כמה מילים על שאר ההרצאות שהועברו באותו מפגש.

המרצה הראשון, זהר ערד, הקסים, אני חושב את כולם, בהרצאתו בו סיפר על שיטת בניית האתרים "Progressive Enhancement". אני חייב להודות שלא שמעתי על הרעיון של הפרוגרסיב הננסמנט לפני ההרצאה ואני חושב שיש ברעיון הזה הרבה אמת וצדק. בשתי מילים, פרוגרסיב הננסמנט בבניית אתרים זו תורה שאומרת: כל אתר שמפתחים מפותח על מנת שיתאים ל100% מהדפדפנים אבל לא בהכרח יראה שתי טיפות מים בכל הדפדפנים. בתורה הזאת, דפדפנים בתומכים ביותר דברים (כמו למשל css3 או html5) יצ'ופרו בפיצ'רים מגניבים יותר, אבל שימו לב חשוב ש-100% מהפונקציונאליות תשמר בכל הדפדפנים. ההרצאה של זהר, נתנה דוגמאות קלילות לאיך לעשות את זה ובאופן כללי הייתה לעניין והועברה בצורה טובה, אני נהנתי מאוד.

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

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

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

מקומם של הפונטים בעולם האינטרנט

המצגת:

לינקים קשורים:

http://www.w3.org/Talks/2010/0313-Fonts-SXSW/ - הרצאתו של ברט בוס על ההיסטוריה של פונטים.
Fuck the foundries – פוסט עצבני שקורא להשתמש בפונטים פתוחים
onlinefontconverter.com – ממיר פורמטי פונטים אונליין

טכניקות להחלפת פונטים:

sIFR – וכן לינק למימוש של sIFR בעברית
FLIR
Cufon – וכן לינק למימוש של Cufon בעברית

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

עוד באותו נושא:

‫מפגש #3 בסדרת מפגשי פורום המפתחים של ה-W3C בישראל – עיצוב אתרים מבוסס CSS‬

‫אורן רוט‬ — Thu, 08 Apr 2010 12:04:19 +0000

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

המפגש יפתח עם סקירה של אייל סלע בנוגע טכנולוגיות חדשות והתפתחויות עתידיות בנושאי SVG ו-CSS.

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

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

מצורפת כאן תוכנית המפגש מתוך אתר הW3C הישראלי:

תוכנית המפגש

16:30	התכנסות
17:00	התפתחויות אחרונות ועתידיות ב-CSS3, SVG, ועוד – אייל סלע, מנהל פרויקטים – איגוד האינטרנט הישראלי. אייל הוא מנהל פרויקטים באיגוד האינטרנט הישראלי ומפעיל את משרד ה-W3C הישראלי.
17:30	שיפור הדרגתי (Progressive Enhancement) – גישור הפער בין CSS2 ו-CSS3 – זהר ארד, מפתח ווב צד-לקוח – ג'יקסו. זוהר יציג את פילוסופית השיפור ההדרגתי (Progressive Enhancement) בתחום בניית הממשקים לאתרים ובחינת דרכי הטמעה חוצות-פלטפורמה באמצעות CSS2 ו-CSS3, תוך שמירה על שימושיות וסטנדרטים. זוהר הוא בוגר מגמת מדיה דיגיטלית ב-London College of Communication, University of the Arts. מפתח צד-לקוח מעל חמש שנים מהן שלוש שנים כמפתח צד-לקוח ראשי מחברת מטהקפה. התמחות בתכנון והטמעת ממשקי-צד לקוח באתרים בכל הגדלים ולכל הפלטפורמות, תוך הקפדה על סטנדרטים וביצועי-דפדפן מיטביים.
18:15	הפסקה
18:30	מקומם של הפונטים בעולם האתרים - אורן רוט (htmtips@), מנכ"ל, דקור בניית אתרים. בוני אתרים צריכים להתגבר על קשיים רבים בכדי להציג פונטים מיוחדים באתריהם. בהרצאה יסביר אורן על הגלגול של הפונטים בעולם האתרים, על העבר, העתיד של הפונטים ובעיקר מה ניתן וכדאי לעשות היום על-מנת להציג פונטים באתרי אינטרנט. אורן הוא מנהל חברה לבניית אתרים דקור (Decor-d.com). בעל ניסיון רב בתכנות צד-שרת וצד לקוח. שולט בשפות: PHP, Javascipt, AS3 (פלאש), XML, CSS, MySQL. וכן במסגרות פיתוח Zend ו-jQuery. בעל אתר ללימוד בניית אתרים htm.co.il.
19:15	Accessibility with CSS – Lisa Seeman, W3C invited expert. Former CEO UB Access Web accessibility is about making Web content usable to all types of people and user scenarios – including the disabled communities such as the visually impaired or people with motor or learning disabilities. This session demonstrates the use of CSS techniques for accessible Web content and applications. Lisa Seeman is an inventor, entrepreneur and has been instrumental in creating the standards for interoperability and accessibility worldwide. Lisa headed a government funded incubator project that culminated into UB Access as an independent company involved in knowledge capture and adaptive interfaces for accessibility interoperability cross cultural adaptation and elearning. Lisa was also involved the creation of web programming languages and protocols. She was the original author and editor of Roles specification and the States and Properties Module for Accessible Rich Internet Applications which then became the Accessibility for Rich Internet Applications (ARIA) for the W3C.
20:00	הפסקה
20:15	Introducing to CSS3: a showcase of things to come – Akiva Levy, Six Thirteen Design Discover What's new in CSS3, learn interesting features and how it's better the CSS2.1. Akiva will also present some interesting real life example of using CSS3 in web projects. Akiva have been involved in Web design now for roughly 10 years, and programming about 5. He is experienced in user interface/experience, design, CSS, HTML, JavaScript, PHP, database architecture, web applications, Accessibility and has been getting more involved in the semantic web (RDFa, microformats) and the mobile web. He is currently involved in the development of two major web applications, and is frequently hired as a consultant to lead others' projects in the right direction for success.
21:00	סיום

תגית בטוויטר: #w3cdf

מצפה לראותכם במפגש, שווה לבוא!

עוד באותו נושא:

‫שימוש בפונטים בלתי רגילים, הפעם: cufon‬

‫אורן רוט‬ — Sun, 20 Sep 2009 18:44:11 +0000

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

<קוד>

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

איזה כיף לכתוב בכל פונט שמתחשק לי.

הסיבה שבחרתי להציג לכם דווקא את cufon ולא את FLIR היא מכיוון ו-cufon לא תלויה בשפת שרת (PHP במקרה של FLIR), והמימוש שלה ממש ממש פשוט. (לא התנסיתי בFLIR אבל אתם מוזמנים לספר לי בתגובות).

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

יתרונות

מימוש פשוט מאוד (הרבה יותר פשוט מ-sIFR למשל)
טכניקה שלא תלויה בצד שרת (בניגוד לFLIR) או בפלאש (בניגוד ל-sIFR)
פועלת במהירות

חסרונות

תלויה ב-javascript
אי אפשר לסמן טקסט (חסרון משמעותי לפעמים)
אין אפשרות להציג צבע שונה כאשר העכבר נמצא על הטקטס

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

טוב עכשיו אחרי שעברנו על כל היתרונות והחסרונות של cufon, נעבור לאופן המימוש.

הורדת הקבצים

כמו תמיד נתחיל בהורדת הקבצים, ניכנס לאתר cufon ונוריד את קובץ ה-JS שנמצא תחת הכפתור "download" (או ישירות מהלינק הזה)

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

כעת שסיימנו ויצרנו את קובץ ה-JS לפונט שלנו, כל מה שנותר לנו הוא להגדיר בקובץ הHTML הרצוי להשתמש בפונט המיוחד.

אתחול הגדרות לקובץ

דבר ראשון שנעשה הוא להכניס בין תגיות ה-HEAD קישור לקבצי ה-JS שהורדנו:

1 2	<script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/example-Font_500.font.js"></script>

הקובץ השני צריך להיות לפי השם של הפונט שאתם בחרתם.

כעת נוסיף קוד JS נוסף על מנת להפעיל את cufon:

1
2
3
4
5

במקום h3 רשמו את שם האלמנט בו אתם רוצים להחיל את הפונט המיוחד.

ככה צריך להיראות בסופו של דבר הHTML שלכם:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
...
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/BN_Traktor_400.font.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('h3');
});
</script>
...
</head>
<body>
...
<h3>אני פסקה עם פונט מיוחד</h3>
...
</body>
</html>

כל זה טוב ויפה אבל אם תנסו את זה בעצמכם תראו שיש בעיה חמורה, אם כי לא מפתיעה- כל הטקסט בעברית מהופך :/

אל דאגה תרתי ברשת אחר פתרון ובבלוג של האתר ספסל מצאתי פתרון לבעיית העברית (תודות לשירה).

עברית שפה קשה

הפתרון הוא דיי פשוט, מריצים סקריפט (cufonRTL.js) שעובר על המחרוזת בתוך האובייקט הנבחר (בדוגמא שלנו H3), הסקריפט מוסיף למחרוזת תגית והופכת את כיוון (Direction) הטקסט למשמאל-לימין. אח"כ הסקריפט מפריד בין כל התווים במחרוזת הופך את הסדר שלהם ומחבר בחזרה, אתם מוזמנים לצפות בקוד ולהבין.

הסקריפט הזה נתמך ע"י jQuery ולכן צריך גם להוסיף את הספרייה הזו לHTML שלנו. היתרון בהוספת jQuery היא שכעת במקום שכתבנו H3 אנחנו יכולים לכתוב כל אלמנט לפי הסינטקס של jQuery. (לדוגמא: H3.niceFont יבחר את כל אלמנטי ה-H3 בעלי class ששמו 'niceFont').

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/CufonRTL.js"></script>
<script type="text/javascript" src="js/BN_Traktor_400.font.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('h3');
CufonRTL.RTL('h3');
});
</script>
...
</head>
<body>
...
<h3>אני פסקה עם פונט מיוחד שעובד גם בעברית.</h3>
...
</body>
</html>

שתי התוספות הראשונה הן קישור לקבצי ה-JS של jQuery והיפוך העברית (שורות 4 ו-6 בהתאמה). התוספת השלישית היא הפעלה של סקריפט ההיפוך (שורה 11) שימו לב שהיא מקבלת כפרמטר את אותה מחרוזת (בדוגמא שלנו H3) ש-cufon מקבל.

זהו זה, זה עובד!

מה חשוב לזכור?

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

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

עוד באותו נושא:

‫Lightwindow – הוראות שימוש (המדריך המלא)‬

‫אורן רוט‬ — Thu, 19 Mar 2009 12:29:09 +0000

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

<דוגמא><קוד>

כפי שציינתי במאמר הקודם ל-lightbox שכפולים רבים. במאמר זה אציג לכם את טכנולוגיית lightbox באמצעות שכפול שאני אוהב והוא ה-lightwindow. אני אוהב את ה-lightwindow במיוחד מכיוון והוא מהיר, מכיל הרבה פונקציות להצגת גלריה ועוד תכונות נוספות שעליהם אני לא ארחיב במאמר זה (פתיחת חלונות iframe, פלאש,PDF ועוד רבים).

חלק 1 – התקנה

1. הורידו את קבצי ה- lightwindow מכאן.

2. העלו את שלושת התיקיות (css,javascript,images) ל-root של אתרכם.

3. טכנולוגיית lightwindow משתמשת בספריות JavaScript למימוש אפקטי האנימציה(Framework ו-Scriptaculous). יש להוסיף את שלושת קבצי ה-JS הבאים לתוך של האתר שלכם, בין תגיות ה-head (לפי הסדר הבא):

1
2
3

4. יש להוסיף כמו כן את קובץ הCSS המצורף (לאותו מקום):

1	<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

חלק 2 – הפעלה

1. הוסיפו תכונת "class="lightwindow לכל קישור על מנת להפעיל את ה-lightwindow.
לדוגמא:

1	<a href="images1.jpg" class="lightwindow" caption="תמונה מדליקה">/></a>

2. הוסיפו תכונת caption על מנת להוסיף כותרת לתמונתכם בחלון ה-lightwindow. (אופציונלי)

3. הוסיפו תכונת author על מנת להוסיף זכויות יוצרים לתמונתכם בחלון ה-lightwindow. (אופציונלי)

4. על מנת ליצור קשר בין תמונות וליצור גלריה אחידה (ניתן יהיה להעביר קדימה אחורה בין התמונות), יש להוסיף לכל התמונות ששייכים לאותה גלריה תכונת "[rel="ALBUM[GALLERY.

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

לדוגמא הקוד:

1
2
3
4

ולתוצאה:

<תוצאה>

עוד באותו נושא:

‫LightBox – הדרך להצגת גלריית תמונות‬

‫אורן רוט‬ — Sun, 22 Feb 2009 09:59:55 +0000

בתור בונה אתרים, בניתי גלריות רבות לאתרים שלי וללקוחות שלי. ישנן טכניקות רבות לבניית גלרית תמונות: גלריות משוגעות בפלאש,גלריות שנטענות תוך כדי צפייה עם שילוב של AJAX וגלריות סנטדרטיות בHTML. עד שנתקלתי בטכנולוגית lightbox, תמיד הייתי צריך להתפשר בין קוד תקין ותאימות מלאה לדפדפנים לבין גלריה מעוצבת בצורה היפה ביותר. בניתי גלריות בFLASH, מערכות דינמיות של גלריות תמונות בPHP אבל הטכניקה שמציעה lightbox נותנת את הפתרון הטוב ביותר, תשאלו למה? התשובה במילה אחת – פשטות.

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

מה זה lightbox

lightbox והגרסה החדשה, lightbox2 היא תוכנת JavaScript שמאפשרת להציג תמונות גדולות בלי לטעון את כל הדף מחדש (באותו עמוד) בצורה אלגנטית. עיקר השימוש של הקוד הוא להצגת גלריות תמונות. בעקבות ההצלחה של lightbox אצל מפתחי האתרים, נוצרו שכפולים רבים של הקוד על מנת להציג גם טקסטים, טפסים, סרטונים ובעצם כל מה שאתם מכירים שקיים באינטרנט, במין חלונית מעוצבת בטכנולוגיית JS (אפילו אתר גוגל). אתם בטח ראיתם דוגמאות רבות לשימוש ב-lightbox באתרים שונים גם אם לא הייתם מודעים לכך שמדובר בטכנולוגיה זו. לדוגמא, האתר המופרסם פייסבוק משתמש ב-thickbox לשימושים שונים (בינהם: אישור חבר, הודעה על אי-הרשאה ועוד), ואף במערכת הניהול של האתר הזה (wordpress) יש שילוב של thickbox כאשר מעוניינים להעלות מדיה לאתר.

במאמר הבא אני ארחיב ואספר על שימושים נוספים בטכנולוגיה זו. וכעת חזרה לנושא המאמר, גלריית תמונות. כמו בכל גלריה תמונות סטנדרטית, הגלריה תהיה בנויה מתמונות מוקטנות של כל תמונה מקורית (thumbnails) ולחיצה על תמונה קטנה תציג את אותה תמונה בגודל המקורי. ישנם שתי סיבות לתצורה הזו של הגלריה. אחת, עיצוב גרפי נוח ונכון למשתמש ושנית, חסכון בזמן טעינת העמוד – כך המשתמש יכול לצפות בדוגמית מכל תמונה והדפדפן יטען את התמונות בגודל המקורי רק לפי בקשת המשתמש. טכניקת lightbox עובדת על התצורה הבסיסית הזו של הגלריה ובנוסף היא משלבת אפקטי JavaScript ו-CSS שהופכים את התצורה הפשוטה של הגלריה למדהימה.

אז איך זה עובד?

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

דוגמא לקוד שמתווסף לתמונה:

1
2
3

זה הכל, עד כדי כך פשוט, נקי ויותר חשוב מהכל – ידידותי למנועי החיפוש.

חסרון

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

כעת לאחר שסקרתי את הטכנולוגיה להצגת תמונות דלגו ל מאמר הבא שלי בו אני מסביר כיצד לממש (טכנית) את גלריית התמונות שלכם במאצעות lightbox.