T 077-8868848
F 077-7868848
M 054-4822621

מבוא לאינטרנט סמנטי - RDFa חלק שני

תרגום מאתר ALA נכתב במקור ע"י מרק בריבק

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

  1. האלמנטים link ו a מעידים על הקשר בין המסמך הנוכחי ומסמך אחר. האלמנט rel@ מספק לנו ערך שמתאר את ההקשר בצורה טובה יותר.
  2. התכונות rel@ ו href@ לא מוגבלות יותר לאלמנטים link ו a, אלה יכולים לשמש גצ ב img כדי להביע הקשר בין התמונה לדבר אחר
  3. בHTML רגיל, תכונות המסמך נקבעות בראשו, ע"י שימוש בcontent@ עם meta. בHTML עם RDFa content@ יכול לשמש כדי להוסיף תכונה לכל אלמנט.
  4. אף על פי שHTML משתמש ב name@ כדי לקבוע את שם התכונה ב meta הוא לא יכול לשמש באלמנטים אחרים, לכן RDFa מוסיפה את התכונה property@
  5. אם התכונה content@ לא נמצאת, הערך המיוחס בטקסט יקבע את ערך התכונה
  6. אם התכונה content@ נמצאת, הערך שלה עוקף את הערך בטקסט המיוחס במסמך וקובע את ערך התכונה

בחלק II , נלמד איך להוסיף תכונות לתמונה, ואיך להוסיף מידע לכל אלמנט - ונוסיף עוד כללים לרשימה.

הוספת תכונות לתמונה

בחלק הראשון דנו בעובדה שבHTML סטנדרטי,נשתמש ב rel@ כדי להגדיר את היחס בין המסמך הנוכחי למסמך אחר. כמו כן הראנו שניתן להשתמש ב rel@ גם על אלמנט הimg. התכונה מביעה את היחס בין התמונה ומסמך אחר. את העיקרון ניתן לישם גם על תכונות אחרות של התמונה, הן גם יתיחסו לתמונה ולא למסמך המכיל טותה.

לדוגמה, כדי להציג מתי התמונה נוצרה, נוסיף את המידע הזה: 


                    <img src="image1.png" property="dc:created" content="2009-03-22" />
                    <img src="image2.png" property="dc:created" content="2009-05-01" />

כלל 7:

HTML רגיל יכול רק להגדיר תכונות לדף עצמו, לעולת זאת RFFa מאפשר להוסיף תכונות גם לURL של תמונות.

RDFa מאפשר גם להוסיף תכונה ויחס לאותה תמונה: 


                <img src="image1.png" rel="license" 
                href="http://creativecommons.org/licenses/by-sa/3.0/" 
                property="dc:created" content="2009-05-01" />

הוספת תכונות לכל אלמנט בדף

באופן כללי, עברנו שלושה שלבים עד עכשיו, כשעקבנו אחרי ההתפתחות מHTML בסיסי לRDFa:

  • הראנו שכל האלמנטים שמשמשים להגדרת המסמך בhead יכולים לשמש גם ב body אף על פי שהיינו צרכים להחליף את name@ ב property@
  • ראינו איך RDFa מאפשר ליבא תכונות ויחסים ממילונים מוגדרים, בעזרת שימוש בתחיליות
  • למדנו איך RDFa מאפשר שימוש בתכונות ויחסים גם לתמונות, בנוסף למסמך עצמו.

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

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

לדוגמה, הבה נניח שיש לנו קישורים לכמה מצגות המדברות על RDFa: 


                    <a href="http://www.slideshare.net/fabien_ »
                    gandon/rdfa-in-a-nutshell-v1">RDFa in a »
                    nutshell</a>

                    <a href="http://www.slideshare.net/mark.birbeck »
                    /the-5-minute-guide-to-rdfain-only-6-minutes-40- »
                    seconds">The 5-minute guide to RDFa...in only 6
                    minutes and 40 seconds</a>

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

הגיוני לחשוב שנוסיף rel="license" ללינקים, כמובמקרים אחרים. אבל זכרו שזה מורה שלמסמך הנוכחי יש רשיון שמיוצג ע"י הפריט ב href@ , במקרה זה המסמך האחר הוא מצגת, לא מסמך רשיון.

אז כדי לאפשר את הוספת המידע לכל פריט מידע, RDFa מוסיף תכונה חדשה, שנרקאת about@. היא ממלאת תפקיד זהה ל src@ בתמונה - יכולות להיות לה rel@ ו property@ שמשויכות לה - אבל אפשר להשתמש בה שכל אלמנט HTML. כך נשתמש ב about@ כדי להוסיף מידע רשיון על המצגת. ראשית הלינק: 


                    <a href="http://www.slideshare.net/fabien_gandon »
                    /rdfa-in-a-nutshell-v1">RDFa in a nutshell</a>

ועתה נוסיף את המידע על הרשיון: 


                    <a about="http://www.slideshare.net/fabien_gandon »
                    /rdfa-in-a-nutshell-v1" rel="license"
                      href="http://creativecommons.org/licenses/by/2.5/">CC BY</a>.

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

ולמצגת השניה: 


                    <a href="http://www.slideshare.net/mark.birbeck »
                    /the-5-minute-guide-to-rdfain-only-6-minutes-40- »
                    seconds">The 5-minute guide to RDFa...in only 6 »
                    minutes and 40 seconds</a>

הרשיון מוגדר ע"י: 


                    <a about="http://www.slideshare.net/mark.birbeck »
                    /the-5-minute-guide-to-rdfain-only-6-minutes-40- »
                    seconds" rel="license" 
                      href="http://creativecommons.org/licenses/by-sa/2.5/">CC BY SA</a>.

ושוב - מידע זה יכול להופיע בכל מקום במסמך

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

כמובן שבמקרה אמיתי ללינק יצורף האיקון של הרשיון : 


                    <a about="http://www.slideshare.net/mark.birbeck »
                    /the-5-minute-guide-to-rdfain-only-6-minutes-40- »
                    seconds" rel="license" 
                      href="http://creativecommons.org/licenses/by-sa/2.5/">
                    <img src="http://i.creativecommons.org/l/by-sa/2.5/80x15.png" />
                    </a>

כמו שכנראה הבנתם, כמו שאנחנו משתמשים ב property@ ו content@ כדי להוסיף תכונות למסמך ולתמונות, נוכל להוסיף אותם גם למשאב שאליו ה about@ מתייחס. לדוגמה, אם נרצה להוסיף את שם היוצר למצגת, נרשום כך: 


                    <a about="http://www.slideshare.net/ »
                    fabien_gandon/rdfa-in-a-nutshell-v1" rel="license"
                      href="http://creativecommons.org/licenses/by/2.5/"
                      property="dc:creator" content="Fabien Gandon">
                    <img src="http://i.creativecommons.org/l/by/2.5/80x15.png" />
                    </a>

לכן הכלל יהיה:

כלל 8:

תכונות ויחסים יכולים להיות מוספים לכל אלמנט, לא רק למסמך או תמונות, ע"י שימוש בתכונה about@.

השימוש בabout@ כדי להוסיף משמעות לתכונות ויחסים

הוספת מספר תכונות ויחסים למסמך היא פשוטה, בHTML סטנדרטי, נוסיף מספר אלמנטים מסוג meta ו link ב head של המסמך, ואולי כמה אלמנטים מסוג a שנוסיף להם rel@ ב body. עכשיו אנחנו יכולים להוסיף property@ ו content@ בתוך ה body, שגם אותם אפשר לפזר.

אבל מה המקבילה של שימוש רב בתכונה about@? הדוגמאות שהראנו עד כה השתמשו רק בתכונה אחת ויחס אחד לכל אלמנט, מפני שזה המגבלה שהמבנה של HTML מטיל עלינו: לכל תכונה של אלמנט יכול להיות רק שם אחד יחודי, לכן אין אפשרות להוסיף ערכים מרובים או יחסים מרובים לאלמנט יחיד.

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


                    <a about="http://www.slideshare.net/fabien_gandon »
                    /rdfa-in-a-nutshell-v1" rel="license" 
                      href="http://creativecommons.org/licenses/by/2.5/"
                      property="dc:creator" content="Fabien Gandon">
                    <img src="http://i.creativecommons.org/l/by/2.5/80x15.png" />
                    </a>

זכרו שהקוד הזה אומר בעצם שני דברים. ראשית, "למצגת בURL יש רשיון CC" ושנית, "המצגת בURL נוצרה ע"י פביאן גנדון".

כדי להפוך את הבעיה שאנו מנסים לפתור ליותר מוחשית, דמינו שאנו רוצים להוסיף את התאריך שבה המצגת פוררסמה - בהתחשב בעובדה שאנחנו לא יכולים להוסיף תכונת property@ נוספת ללינק.

עכשיו נעבור לפתרון הבעיה.

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


                    <div about="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1"> 
                      ... 
                    </div>

ברגע שיש לנו את האלמנט, נוכל להוסיף את כל התכונות בתוכו: 


                    <div about="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1"> 
                     <h1>RDFa in a Nutshell</h1> 
                     <ul>
                       <li>Author:
                         <em property="dc:creator">Fabien Gandon</em></li>
                       <li>Created:
                         <em property="dc:created" content="2007-01-01">
                         Jan 1st, 2007</em></li>
                       <li>License: 
                         <a rel="license" href="http://creativecommons.org »
                    /licenses/by/2.5/"><img src="http://i.creativecommons.org »
                    /l/by/2.5/80x15.png" /></a></li>
                     </ul>
                    </div>

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


                    <html xmlns:dc="http://purl.org/dc/terms/"> 
                     <head>
                     <title>RDFa: Now everyone can have an API</title> 
                     </head> 
                     <body>
                     <h1>RDFa: Now everyone can have an API</h1>
                     <ul>
                       <li>Author: 
                         <em property="dc:creator">עדו דקרס</em></li>
                       <li>Created:
                         <em property="dc:created" content="2009-05-09">May 9th, 2009</em></li>
                       <li>License: 
                         <a rel="license" href="http:// »
                     creativecommons.org/licenses/by-sa/3.0/">
                       CCAttribution-ShareAlike</a></li>
                       <li>Previous version: 
                         <a rel="dc:replaces" href="rdfa.0.8.html">
                         version 0.8</a></li>
                     </ul>
                     </body>
                    </html>

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

כלל 9:

התכונה about@ קובעת את ההקשר של התכונות וההקשרים. אם לא נקבע ערך about@, אז כל התכונות מתיחסות למסמך עצמו.

אם איזשהו פרט בחלק האחרון לא מובן אמליץ לכם לקרוא אותו שוב, הטכניקה הזו היא כנראה ההבדל הגדול ביותר בין RDFa והשיטות האחרות להטמעת מידע בHTML, כמו Microformats ו eRDF/

לסיכום

בשני המאמרים עברנו על הבסיס של RDFa שהוא:

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

אם תרצו לעבור מעבר לבסיס, וללמוד הבטים יותר מתקדמים של RDFa, כדאי להביט ב:RDFa Handbook

כמו כן כדאי להוסיף, שכדי שהדף יעבוד בצורה מושלמת ויזוהה כדף המכיל RDFa צריך להוסיף הגדרת Doctype מתאימה:
HTML: 

                    
                        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML4+RDFa 1.0//EN"
                            "http://www.w3.org/MarkUp/DTD/html4-rdfa-1.dtd">

XHTML: 

                    
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
                            "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">