‫Htm - אחלה טיפים לבניית אתרים » עיצוב אתרים‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫גלריית פלאש על בסיס XML מתנה!‬ http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/ http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/#comments Sun, 17 Jan 2010 11:23:21 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=988

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

picWin - גלריית פלאש עם טעינה מתוך XML

picWin - גלריית פלאש עם טעינה מתוך XML

אפשרויות:

1. הוספת תמונות מתוך XML –
ניתן להוסיף תמונות לתוך קובץ pics.xml. כל תמונה תקבל את המאפיינים הבאים:

1
2
3
4
5
6
<pic>  
       <dir>picDir/normal</dir>
       <big_dir>picDir/big</big_dir>  
       <name>1.jpg</name>  
       <desc>picture title</desc>  
     </pic>

dir - התיקייה בה תמצא התמונה לפלאש (התמונה הקטנה)
big_dir - התיקייה בה התמונה ל-lightbox (התמונה הגדולה)
name - שם קובץ התמונה (בשני התיקיות!)
desc - יופיע כתיאור התמונה בתוך ה-lightbox.

2. תוכלו לשנות את מספר הריבועים בפלאש באמצעות שינוי שורה מספר 6 בקובץ project.fla:

1
var fdata:fData = new fData(5,8,stage.stageWidth,stage.stageHeight,"height");

החליפו את הספרה 5 במס' השורות הרצוי ואת הספרה 8 במס' העמודות הרצוי.

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

]]> http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/feed/ 51 ‫שימוש בפונטים בלתי רגילים, הפעם: cufon‬ http://www.htm.co.il/2009/09/20/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%a4%d7%95%d7%a0%d7%98%d7%99%d7%9d-%d7%91%d7%9c%d7%aa%d7%99-%d7%a8%d7%92%d7%99%d7%9c%d7%99%d7%9d-%d7%94%d7%a4%d7%a2%d7%9d-cufon/ http://www.htm.co.il/2009/09/20/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%a4%d7%95%d7%a0%d7%98%d7%99%d7%9d-%d7%91%d7%9c%d7%aa%d7%99-%d7%a8%d7%92%d7%99%d7%9c%d7%99%d7%9d-%d7%94%d7%a4%d7%a2%d7%9d-cufon/#comments Sun, 20 Sep 2009 18:44:11 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=458

כתבתי באתר הזה, הרבה מאוד מאמרים על טכניקה של שימוש בפונטים בלתי רגילים – פונטים שלא מותקנים לכולם על המחשב ולכן אי אפשר להשתמש בהם בטקסט פשוט לאתר. בעוד אנחנו קרובים מאוד להשקת 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
<script type="text/javascript">
$(function(){
Cufon.replace('h3');
});
</script>

במקום 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), הסקריפט מוסיף למחרוזת תגית<bdo> והופכת את כיוון (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.




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

]]> http://www.htm.co.il/2009/09/20/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%a4%d7%95%d7%a0%d7%98%d7%99%d7%9d-%d7%91%d7%9c%d7%aa%d7%99-%d7%a8%d7%92%d7%99%d7%9c%d7%99%d7%9d-%d7%94%d7%a4%d7%a2%d7%9d-cufon/feed/ 46 ‫תפריט עיני דג – jqDock‬ http://www.htm.co.il/2009/09/13/%d7%aa%d7%a4%d7%a8%d7%99%d7%98-%d7%a2%d7%99%d7%a0%d7%99-%d7%93%d7%92-jqdock/ http://www.htm.co.il/2009/09/13/%d7%aa%d7%a4%d7%a8%d7%99%d7%98-%d7%a2%d7%99%d7%a0%d7%99-%d7%93%d7%92-jqdock/#comments Sun, 13 Sep 2009 11:24:12 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=341

לאחרונה הוספתי לאתר שלי רשימת כפתורי שיתוף בסוף כל פוסט (אתם מוזמנים לראות למטה), כפתורים שאפשר באמצעותם לפרסם מודעות בפייסבוק, טוויטר, להדפיס ולשלוח את הפוסט במייל.
עכשיו למה אני מספר לכם את זה? כי הוספתי גם אפקט ממש מגניב לכפתורים האלה – שעוברים עם העכבר על כל אייקון הוא גדל וכשמורידים את העכבר האייקון קטן חזרה לגודל המקורי.
האפקט הזה מופעל באמצעות ספריית ה-javascript המוכרת jquery וספרייה javascript נוספת בשם: jqDock.

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

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

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

איך גורמים לזה לפעול?

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

1
2
3
4
5
6
7
<div id='menu'>
<img src='image1.gif' alt='image1.png' title="" />
...
<a href='page.html' title="">
<img src='imageN.png' alt="" title="" /></a>
...
</div>

שימו לב שאפשר לשלב גם לינקים וגם תמונות פשוטות ללא לינקים כלל.

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

כעת נעבור להוספת ספריות ה-JS (את הקוד הבא רצוי להוסיף בין תגיות הhead):

1
2
<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='jquery.jqDock.js'></script>

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

ולסיום הקוד שמאתחל את jqDock:

1
2
3
$(document).ready(function(){
  $('#menu').jqDock(options);
});

המילה menu# פונה לאלמנט ה-DIV שלנו, וכך הוא מבצע את האפקט על כל התמונות שה-Div מכיל. options הוא אופציונלי והוא בעצם אחראי לברור בין האפשרויות ש-jqDock מציעה, לבנתיים לא נוסיף אותו ונשאיר סוגריים ריקים. זהו התפריט מוכן.

במאמר הבא אני אסביר לכם על האופציות ש-jqDock מציעה.

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

]]> http://www.htm.co.il/2009/09/13/%d7%aa%d7%a4%d7%a8%d7%99%d7%98-%d7%a2%d7%99%d7%a0%d7%99-%d7%93%d7%92-jqdock/feed/ 10 ‫Lightwindow – הוראות שימוש (המדריך המלא)‬ http://www.htm.co.il/2009/03/19/lightbox-%d7%94%d7%95%d7%a8%d7%90%d7%95%d7%aa-%d7%a9%d7%99%d7%9e%d7%95%d7%a9/ http://www.htm.co.il/2009/03/19/lightbox-%d7%94%d7%95%d7%a8%d7%90%d7%95%d7%aa-%d7%a9%d7%99%d7%9e%d7%95%d7%a9/#comments Thu, 19 Mar 2009 12:29:09 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=210

במאמר הקודם הסברתי לכם על טכנלוגיית 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
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>

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="תמונה מדליקה"><img.../></a>

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

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

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

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

לדוגמא הקוד:

1
2
3
4
<a href="037.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" caption="כאן אפשר לראות גם גיטרה חשמלית וגם אף של בתאדם!" author="מר. כהן"><img src="037-150x150.jpg" alt="אף וגיטרה חשמלית" /></a>
<a href="250.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" caption="צילום שהייתי אצל הרופא שלי בדיוק שסגרו לי פה של דב על היד..." author="צלם מוכשר"><img src=" 250-150x150.jpg" alt="יד שבורה עם סמן עכבר" /></a>
<a href="dsc00573.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" ><img title="גבר וגברת" src="dsc00573-150x150.jpg" alt="גבר וגברת" /></a>
<a href="dsc01017.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" ><img src=" dsc01017-150x150.jpg" alt="בחור מאוד נחמד" /></a>

ולתוצאה:

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

]]> http://www.htm.co.il/2009/03/19/lightbox-%d7%94%d7%95%d7%a8%d7%90%d7%95%d7%aa-%d7%a9%d7%99%d7%9e%d7%95%d7%a9/feed/ 7 ‫LightBox – הדרך להצגת גלריית תמונות‬ http://www.htm.co.il/2009/02/22/lightbox-%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%aa%d7%9e%d7%95%d7%a0%d7%95%d7%aa-%d7%95%d7%a2%d7%95%d7%93/ http://www.htm.co.il/2009/02/22/lightbox-%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%aa%d7%9e%d7%95%d7%a0%d7%95%d7%aa-%d7%95%d7%a2%d7%95%d7%93/#comments Sun, 22 Feb 2009 09:59:55 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=171

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

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

1
2
3
<a title="כותרת של התמונה" rel="lightbox" href="original_picture.jpg">
<img src="thumb_picture.jpg" />
</a>

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

חסרון

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

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

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

]]> http://www.htm.co.il/2009/02/22/lightbox-%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%aa%d7%9e%d7%95%d7%a0%d7%95%d7%aa-%d7%95%d7%a2%d7%95%d7%93/feed/ 0 ‫שימוש בטכנולוגיית sIFR בעברית‬ http://www.htm.co.il/2009/02/12/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%98%d7%9b%d7%a0%d7%95%d7%9c%d7%95%d7%92%d7%99%d7%99%d7%aa-sifr-%d7%91%d7%a2%d7%91%d7%a8%d7%99%d7%aa/ http://www.htm.co.il/2009/02/12/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%98%d7%9b%d7%a0%d7%95%d7%9c%d7%95%d7%92%d7%99%d7%99%d7%aa-sifr-%d7%91%d7%a2%d7%91%d7%a8%d7%99%d7%aa/#comments Thu, 12 Feb 2009 10:18:49 +0000 ‫אורן רוט‬ http://htm.co.il/?p=70

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

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

מה עושים?

עברתי וסרקתי את הרשת, וחיפשתי פתרון לעברית הפוכה. מקריאה במקורות של adobe, הבנתי שבגרסה של flash 10 יש תמיכה מלאה בעברית אך מכיוון ו-sIFR משתמש ב-flash 8 החלטתי לוותר על פתרון זה. נזכרתי שכבר השתמשתי במחלקה שהופכת עברית לפלאש כאשר יצרתי משחק טריוויה (משחק שטוען את השאלות מתוך XML). שילבתי את המחלקה בקוד של sIFR, ומניסויים ובדיקות שלי היא עובדת בסדר גמור.

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

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

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

מסיפור ארוך למימוש קצר

דיברתי הרבה ועכשיו לפתרון:

sifr3-r436-rtl.rar

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

בעיות ואלטרנטיבות

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

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

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

]]> http://www.htm.co.il/2009/02/12/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%98%d7%9b%d7%a0%d7%95%d7%9c%d7%95%d7%92%d7%99%d7%99%d7%aa-sifr-%d7%91%d7%a2%d7%91%d7%a8%d7%99%d7%aa/feed/ 2 ‫הדרך לשילוב sIFR באתרכם‬ http://www.htm.co.il/2009/02/09/%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%a9%d7%99%d7%9c%d7%95%d7%91-sifr-%d7%91%d7%90%d7%aa%d7%a8%d7%9b%d7%9d/ http://www.htm.co.il/2009/02/09/%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%a9%d7%99%d7%9c%d7%95%d7%91-sifr-%d7%91%d7%90%d7%aa%d7%a8%d7%9b%d7%9d/#comments Mon, 09 Feb 2009 09:15:10 +0000 ‫אורן רוט‬ http://htm.co.il/?p=71

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

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

לפני שאני אתחיל לפרט את השלבים המובנים בשילוב sIFR באתרכם הנה רשימה של כמה דברים שאתם תצטרכו על מנת להבין ולהשתמש ב- sIFR:

  • עורך FLASH (מינימום פלאש 8 )
  • ידע מינימאלי בפלאש
  • ידע מינימאלי בCSS

עכשיו, בואו נתחיל:

  1. הורידו את הגרסה (קובץ rar) האחרונה של "3 sIFR" מאתר novemberborn.
  2. חלצו את הקבצים מקובץ ה-rar ותקבלו ארבעה תיקיות-
    1. css – מכיל קובץ css עם הגדרות ברירת מחדל.
    2. demo – מכיל דוגמא נחמדה למימוש הטכנולוגיה*.
    3. Flash – מכיל את כל קבצי הפלאש של הטכנולוגיה (קבצי as, קובץ fla וswf)
    4. js – מכיל שני קבצים רלוונטיים (sifr-config.js, sifr.js)

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

עד כאן הכל פשוט, עכשיו בואו נלכלך קצת את הידיים.

קובץ הפלאש

פתחו את תיקיית הפלאש. כעת פתחו את הקובץ sifr.fla דרך עורך הפלאש שלכם. לחיצה כפולה על השטח הלבן תביא אותכם לעריכת תיבת הטקסט הראשית שם תראו את הטקסט "Bold italic Normal bold &Italic". על מנת לצמצם את גודל הקובץ ככל שניתן, מחקו את הטקסט הנ"ל ובמקומו רשמו אות אחת לכל סגנון גופן בו אתם מעוניינים להשתמש (אתם יכולים לבחור רק סגנון אחד או להשתמש בכל הארבעה), זה הזמן לבחור פונט בלתי רגיל שאתם מעוניינים בו לשימוש בעיצוב אתרכם.

אות אחת מכל סגנון (bold,italic,normal,bold&italic)

אות אחת מכל סגנון (bold,italic,normal,bold&italic)

אם אתם מעוניינים לרנדר בנוסף לאותיות עוד תווים מיוחדים לחצו על כפתור embed… ורשמו בתיבה את כל התווים בהם אתם מעוניינים. לאחר שסיימנו את השלב של הפלאש נשאר רק לייצא קובץ swf. לחצו בתפריט על-

…File?Export?Export Movie

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

flash

לבסוף, לחצו על export.

קובץ הHTML

פתחו לעריכה את קובץ ה-html אליו אתם מעוניינים להוסיף sIFR. כעת אתם צריכים להוסיף אליו את קובץ ה-css שנמצא בתיקיית ה-css. הוסיפו את הקוד הבא:

1
<link rel="stylesheet" href="sifr.css" type="text/css" />

בחרו כמובן את הנתיב הנכון של קובץ (לפי המיקום בו אתם מאכסנים את ה-css באתרכם).
לאחר מכן הוסיפו גם שני קבצי ה-JavaScript באמצעות הקוד הבא:

1
2
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

עריכת ההגדרות בקובץ ה-JS

פתחו לעריכה את קובץ sifr-config.js מתוך תיקייה JS. תחילה הגדירו את מיקום קובץ הפלאש שיצרתם בהתחלה (לדוגמא עם יצרתי את הקובץ "arial.swf"):

1
2
3
var arial = {
src: 'http://www.htm.co.il/flash/<em>arial.swf</em>'
};

*חשוב לבחור מיקום מדוייק בכך מכל מיקום יהיה ניתן לטעון את קובץ הפלאש.
כעת הפעילו את ה-sIFR לפונט שיצרתם באמצעות הקוד הבא:

1
sIFR.activate(arial);

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

1
sIFR.activate(arial, tunga, vrinda);

ולבסוף החליפו אלמנטי html בפלאש כך:

1
2
3
4
5
sIFR.replace(arial, {
selector: 'h1',
css: '.sIFR-root {color: #ffffff; }',
wmode: 'transparent'
});

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

זה הכל! אתם יכולים כעת להעלות את כל הקבצים שעבדנו עליהם ולראות את התוצאה…WOW!

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

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

ביקורת

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

אלטרנטיבה

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

סיכום

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

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

]]> http://www.htm.co.il/2009/02/09/%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%a9%d7%99%d7%9c%d7%95%d7%91-sifr-%d7%91%d7%90%d7%aa%d7%a8%d7%9b%d7%9d/feed/ 1 ‫שימוש בפונטים בלתי רגילים‬ http://www.htm.co.il/2009/02/07/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%a4%d7%95%d7%a0%d7%98%d7%99%d7%9d-%d7%91%d7%9c%d7%aa%d7%99-%d7%a8%d7%92%d7%99%d7%9c%d7%99%d7%9d/ http://www.htm.co.il/2009/02/07/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%a4%d7%95%d7%a0%d7%98%d7%99%d7%9d-%d7%91%d7%9c%d7%aa%d7%99-%d7%a8%d7%92%d7%99%d7%9c%d7%99%d7%9d/#comments Sat, 07 Feb 2009 15:54:05 +0000 ‫אורן רוט‬ http://htm.co.il/?p=55

פונטים בלתי רגילים

פונטים בלתי רגילים

הרצון: שימוש בפונטים שאינם מותקנים בכל המחשבים באתר אינטרנט

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

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

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

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

שיטת sIFR

החלפת פלאש הדרגתית של אינמן, זה התרגום של טכנולוגיית ה-Scalable Inman Flash Replacement) sIFR), וטכנולוגיה (קוד פתוח) זו שמשלבת JavaScript וFlash- מאפשרת להחליף אלמנטים של טקסטים באתר בפלאש מתאים. הטכנולוגיה פותחה ע"י שון אינמן ושופרה ע"י מייק דיוידסון ומארק אובן.

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

לא הבנתם עדיין? כנסו לדמו שהאתר של sIFR מציע.

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

רוצים לדעת איך לגרום לפונטים בלתי רגילים לפעול גם באתר שלכם כנסו למאמר ההמשך שלי שם אני מציג את הדרך לשילוב טכנולוגיית sIFR באתר אינטרנט.

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

]]> http://www.htm.co.il/2009/02/07/%d7%a9%d7%99%d7%9e%d7%95%d7%a9-%d7%91%d7%a4%d7%95%d7%a0%d7%98%d7%99%d7%9d-%d7%91%d7%9c%d7%aa%d7%99-%d7%a8%d7%92%d7%99%d7%9c%d7%99%d7%9d/feed/ 2 ‫שקיפות PNG עבור Internet Explorer 6‬ http://www.htm.co.il/2009/02/05/%d7%a9%d7%a7%d7%99%d7%a4%d7%95%d7%aa-png-%d7%a2%d7%91%d7%95%d7%a8-internet-explorer-ie6/ http://www.htm.co.il/2009/02/05/%d7%a9%d7%a7%d7%99%d7%a4%d7%95%d7%aa-png-%d7%a2%d7%91%d7%95%d7%a8-internet-explorer-ie6/#comments Thu, 05 Feb 2009 13:49:08 +0000 ‫אורן רוט‬ http://htm.co.il/?p=34
הרצון: שימוש בתמונות בעלות שקיפות (PNG) באינטרנט.
הבעיה: אינטרנט אקספלורר 6.
הפיתרון: שימוש בפילטרים.

בדומה לפורמטי התמונות JPEG ו-GIF, גם קבצי PNG הם קבצים שימושיים בבנייה ובעיצוב אתרים באינטרנט.
היתרון המרכזי של פורמט ה-PNG על שאר הפורמטים היא האפשרות לתמיכה בשקיפות (Opacity), דבר חשוב מאוד כאשר מעוניינים ליצור עיצוב מעניין שמשלב שימוש במספר שכבות.
רובכם ודאי יודעים כי גם הפורמט GIF תומך בשקיפות, אך יש הבדל גדול בין הפורמטים. בעוד GIF תומך בשקיפות (opacity), פורמט PNG תומך ב"שקיפות אלפא" (alpha transparency).

מה זה "שקיפות אלפא"?

קבצי GIF מסוגלים לבחור אם להציג פיקסל מסוים שקוף או אטום לחלוטין, בעזרת טכניקה המכונה בשפה המקצועית שקיפות בינארית (binary transparency). לעומתם, קבצי PNG מסוגלים לטפל בשקיפות חלקית שברמתה ניתן לשלוט לפי פרמטר (בין 0 ל255).

תמונה להמחשת שקיפות למחצה בPNG

תמונה להמחשת שקיפות משתנה בPNG

כל מעצב גרפי יודע להשתמש בשקיפות ומכיר את היתרונות בעיצוב בעזרת שכבות. שילוב של טכניקות שקיפות יכולות להוסיף הרבה לאופי של העיצוב גם בתוך אתר אינטרנט.
למרות היתרונות הברורים של פורמט ה-PNG שפירטתי לעומת פורמט GIF עדיין אנו נראה שברשת האינטרנט פורמט GIF פופולרי בהרבה. רבים שואלים את עצמם "מדוע?". ובכן, הסיבה לא תפתיע הרבה אנשים – דפדפן אקספלורר 6 (IE6).

מעצבי אתרים רבים המעוניינים לבנות אתר מקצועי ירצו להתאים את עיצוב האתר לכל הדפדפנים. אם תשאלו אותם לאיזה דפדפן הכי קשה/מעצבן/מעייף להתאים את הקוד (עיצוב) רוב הפעמים זה יהיה IE6.

ובכן גם כאן, הבעיה שקיימת בשימוש בקבצי PNG היא ש-IE6 פשוט לא תומך בשקיפות שלהם.
בעוד ששאר הדפדפנים כמו safari,firefox,IE7 תומכים בשקיפות של קבצי PNG, כאשר מנסים להציג קובץ חצי שקוף בפורמט PNG בIE6 אנו נתקלים בבעיה (בד"כ מעין רקע אפור) ואנחנו צריכים לעבוד קצת יותר קשה כדיי למצוא פתרון.

הפתרון של ביל גייטס

הפתרון שמייקרוסופט הביאה על מנת לפתור את הבעיה בדפדפן שלהם הוא שימוש בפילטרים.
פילטרים הם תוספת שאפשר לתת לכל אלמנט בתוך מאפיין הSTYLE שלו. הפילטרים פותחו ופועלים אך ורק בדפדפני אקספלורר מגרסת 4 ומעלה. ישנם פילטרים שניתן ליצור בעזרתם אפקטים גרפיים רבים (כמו טשטוש תמונה [blur], הוספת צל ועוד רבים).

אחד מהפילטרים שמוצעים ע"י מייקרוסופט הוא ה-"AlphaImageLoad" שבעזרתו אפשרי להציג קבצי PNG עם שקיפות חלקית גם בIE6.

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

כיצד לכלול שקיפות PNG ב IE6

השיטה המעודפת עליי היא השיטה של האתר http://homepage.ntlworld.com/bobosola והיא הוספה של קובץJS (JavaScrip) שמרנדר את כל קבצי הPNG שנמצאים בעמוד האינטרנט לפני טעינת העמוד, אוטומטית. על מנת להפעיל את הקוד באתרכם עבדו לפי השלבים הבאים:

  1. הורידו את קובץ ה- pngfix.js דרך האתר של bobosola.
  2. העלו את הקובץ לאתרכם לתיקייה הרצויה.
  3. בקובץ האתר טענו את קובץ הJS באמצעות הוספת הקוד הבא בתוך תגית <head>:
1
2
3
<!--[if lt IE 7.]>
 <script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
  1. זה הכל. בעצם כמעט הכל.

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

טיפ אישי

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

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

על-מנת לבצע את השינוי בקוד:

1. פתחו את קובץ pngfix.js באמצעות עורך טקסט פשוט.

2. הוסיפו לתנאי-

1
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

את הבדיקה:

1
&& img.className=="trans"

כלומר:

1
if (imgName.substring(imgName.length-3, imgName.length) == "PNG" && img.className=="trans")

3. כעת הוסיפו את האלמנט "class="trans לכל התמונות שאתם מעוניינים בשקיפותן.

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

אז פעם הבאה שאתם משתמשים ב-PNG אל תשכחו לדאוג גם להוסיף את הפילטר.

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

]]> http://www.htm.co.il/2009/02/05/%d7%a9%d7%a7%d7%99%d7%a4%d7%95%d7%aa-png-%d7%a2%d7%91%d7%95%d7%a8-internet-explorer-ie6/feed/ 2