[31 במאי 2008] [0 תגובות]

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

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

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

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

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

מכיוון שישנם מספר אפשרויות(מימושים שונים) להוסיף את הטאבים לאתר, ננסה לבצע סקירה של שניים מהמובילים: DOMTab ו-Tabber.

DOMTab אל מול Tabber

את DOMTab ניתן להוריד מהאתר onlinetools.org ואת Tabber מהאתר barelyfitz.com.

מראה: שני המימושים ניתנים לשינוי ועיצוב מחדש בקלות בעזרת CSS. דוגמה לעיצוב של DOMTab כבר ראינו מקודם, כעת תוכלו להיתרשם מהעיצוב של Tabber משמאל.

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

רישיון: הרישיון של DOMTab מאפשר שימוש חופשי עבור אתרים פרטיים, אך עבור אתרים מסחריים יש לרכוש רישון. עקב כך, רבים מעדיפים את השימוש ב-Tabber שמאפשר שימוש חופשי עבור כל סוגי האתרים.

משקל: שימוש בטאבים דורש שימוש ב-javascript ועלול לנפח את משקל האתר. אומנם הנפחים של ה-javascript קטנים בשני המימושים, אך DOMTab השוקל 10Kb גדול פי 2 מ-Tabber השוקל רק 5Kb.

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

איך זה עובד ?

קבצי ה-javascript נשענים על שני דברים: קוד ה-HTML שמסביר מהם הכותרות בתפריט ומה התוכן של כל כותרת, ובקוד-CSS המסביר כיצד יש לעצב את אותם.

כאשר העמוד נטען, כל הכותרות וכל התוכן שהופיע ב-HTML נקרא ומעוצב על פי ההראות הכתובות בקובץ ה-CSS. ללא שימוש בקוד ה-javascirpt, הינו כעת רואים את כל התוכן פרוש אחד אחרי השני. קוד ה-javascript דואג להעלים את כל התכנים פרט לאחד, ובכל לחיצה על כותרת - הוא מעלים את התוכן הישן ומציג את החדש.

אז במה כדאי לבחור ?

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

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