הדרך לשילוב sIFR באתרכם

 

לאחר שהקדמתי והסברתי לכם על טכנולוגיית 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/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

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

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

הוזכר באתרים אחרים...
  1. שימוש בפונטים בלתי רגילים, הפעם: cufon | Htm - אחלה טיפים לבוני אתרים ב- 23 בספטמבר 2009 בשעה: %I:%M %p
כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון