‫Htm - אחלה טיפים לבניית אתרים » פונטים‬ 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 בישראל – עיצוב אתרים מבוסס CSS‬ http://www.htm.co.il/2010/04/08/%d7%9e%d7%a4%d7%92%d7%a9-3-%d7%91%d7%a1%d7%93%d7%a8%d7%aa-%d7%9e%d7%a4%d7%92%d7%a9%d7%99-%d7%a4%d7%95%d7%a8%d7%95%d7%9d-%d7%94%d7%9e%d7%a4%d7%aa%d7%97%d7%99%d7%9d-%d7%a9%d7%9c-%d7%94-w3c-%d7%91%d7%99/ http://www.htm.co.il/2010/04/08/%d7%9e%d7%a4%d7%92%d7%a9-3-%d7%91%d7%a1%d7%93%d7%a8%d7%aa-%d7%9e%d7%a4%d7%92%d7%a9%d7%99-%d7%a4%d7%95%d7%a8%d7%95%d7%9d-%d7%94%d7%9e%d7%a4%d7%aa%d7%97%d7%99%d7%9d-%d7%a9%d7%9c-%d7%94-w3c-%d7%91%d7%99/#comments Thu, 08 Apr 2010 12:04:19 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=1062

המפגש השלישי במספר יתקיים ב-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

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

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

]]> http://www.htm.co.il/2010/04/08/%d7%9e%d7%a4%d7%92%d7%a9-3-%d7%91%d7%a1%d7%93%d7%a8%d7%aa-%d7%9e%d7%a4%d7%92%d7%a9%d7%99-%d7%a4%d7%95%d7%a8%d7%95%d7%9d-%d7%94%d7%9e%d7%a4%d7%aa%d7%97%d7%99%d7%9d-%d7%a9%d7%9c-%d7%94-w3c-%d7%91%d7%99/feed/ 6 ‫שימוש בפונטים בלתי רגילים, הפעם: 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 ‫מה הפונט? גילוי פונט לפי תמונה‬ http://www.htm.co.il/2009/09/14/%d7%9e%d7%94-%d7%94%d7%a4%d7%95%d7%a0%d7%98-%d7%92%d7%99%d7%9c%d7%95%d7%99-%d7%a4%d7%95%d7%a0%d7%98-%d7%9c%d7%a4%d7%99-%d7%aa%d7%9e%d7%95%d7%a0%d7%94/ http://www.htm.co.il/2009/09/14/%d7%9e%d7%94-%d7%94%d7%a4%d7%95%d7%a0%d7%98-%d7%92%d7%99%d7%9c%d7%95%d7%99-%d7%a4%d7%95%d7%a0%d7%98-%d7%9c%d7%a4%d7%99-%d7%aa%d7%9e%d7%95%d7%a0%d7%94/#comments Mon, 14 Sep 2009 18:36:19 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=399
What The Font?! (תרגום חופשי: מה הפונט?)

What The Font?! (תרגום חופשי: מה הפונט?)

היום אני רוצה להמליץ לכם על כלי חינמי (כמובן) שמוצא שמות של פונטים מתוך תמונת JPEG.

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

האתר MyFonts.com מציע שירות למציאת פונטים אבודים באמצעות העלאת תמונת JPEG. לשירות קוראים WhatTheFont (או בקיצור WTF?),
כל מה שאתם צריכים לעשות זה לעלות תמונה, לזהות את האותיות בתמונה ו-WTF יתן לכם את התוצאות המתאימות והקרובות ביותר לפונט שהעלאתם בתמונה.

בהצלחה במציאת הפונט האבוד :)

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

]]> http://www.htm.co.il/2009/09/14/%d7%9e%d7%94-%d7%94%d7%a4%d7%95%d7%a0%d7%98-%d7%92%d7%99%d7%9c%d7%95%d7%99-%d7%a4%d7%95%d7%a0%d7%98-%d7%9c%d7%a4%d7%99-%d7%aa%d7%9e%d7%95%d7%a0%d7%94/feed/ 1 ‫הדרך לשילוב 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