‫Htm - אחלה טיפים לבניית אתרים » sIFR‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫סיכום מפגש מפתחים מס' 3 – W3C ישראל‬ http://www.htm.co.il/2010/04/28/%d7%a1%d7%99%d7%9b%d7%95%d7%9d-%d7%9e%d7%a4%d7%92%d7%a9-%d7%9e%d7%a4%d7%aa%d7%97%d7%99%d7%9d-%d7%9e%d7%a1-3-w3c-%d7%99%d7%a9%d7%a8%d7%90%d7%9c/ http://www.htm.co.il/2010/04/28/%d7%a1%d7%99%d7%9b%d7%95%d7%9d-%d7%9e%d7%a4%d7%92%d7%a9-%d7%9e%d7%a4%d7%aa%d7%97%d7%99%d7%9d-%d7%9e%d7%a1-3-w3c-%d7%99%d7%a9%d7%a8%d7%90%d7%9c/#comments Wed, 28 Apr 2010 20:36:36 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=1068

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

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

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

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

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

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

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

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

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

המצגת:

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

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

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

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

]]> http://www.htm.co.il/2010/04/28/%d7%a1%d7%99%d7%9b%d7%95%d7%9d-%d7%9e%d7%a4%d7%92%d7%a9-%d7%9e%d7%a4%d7%aa%d7%97%d7%99%d7%9d-%d7%9e%d7%a1-3-w3c-%d7%99%d7%a9%d7%a8%d7%90%d7%9c/feed/ 3 ‫שימוש בפונטים בלתי רגילים, הפעם: 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 ‫שימוש בטכנולוגיית 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