תגובות

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

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

הכלי החדש והמגניב של פיירפוקס 11 נקרא "Tilt" והוא יאפשר לכם לראות כל אתר אינטרנט שתרצו בתלת מימד. איך זה עובד? התלת מימד שאתם רואים מבוסס על שכבות המבוססות על הDOM Elements בHTML – אותם אלמנטים איתם אתם עובדים בפיתוח האתר (תגיות h1, p, div – כל אלה). מה שמרנדר בפועל את התלת מימד הוא תקן הWebGL החדש של HTML5.

שיחקתי קצת עם Tilt והנה כמה אתרים שאתם אולי מכירים בצורה התלת מימדית שלהם:

פייסבוק בתלת מימד

"המאחורה של גוגל"

הבלוקים של Pinterest

ואיך אפשר בלי?

נושאת המטוסים של Ynet

מעבר לזה שהפיצ'ר הזה כל כך מגניב, יש מצב שתמצאו אותו גם שימושי (לפעמים) כשאתם באים לדאבג את הקוד שלכם ולחפש איזה DIV ששכחתם לסגור, או אולי אלמנט שלא זכרתם להעלים, בקיצור – בעיות מבנה HTML- מה שנקרא בשפת העם "Nesting".

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

אז איך משתמשים בכלי הפיתוח של פיירפוקס 11?

סה"כ השימוש בכלי הפיתוח ובפרט בTilt מאוד פשוט. כל מה שתצטרכו זה… את גרסה 11 של פיירפוקס. אם עדיין אין לכם אחד אותה תוכלו להוריד מפה.

אחרי ההתקנה, כנסו לאתר האהוב עליכם ולחצו על המקש הימני בעכבר. כשיפתח לכם התפריט, בחרו את "Inspect Element":

אחרי שלחצתם על התפריט, שימו לב שיפתח לכם סרגל הפיתוח של פיירפוקס 11. לחצו על כפתור התצוגה בתלת מימד – "3D":

זה הכל!

עכשיו תוכלו לשחק קצת עם העכבר, לסובב, להפוך, לטלטל ולהתעלל בכל אתר שתבחרו.

קצת על דניאל שטרנליכט

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

13 תגובות לפוסט "מדריך: לראות את עולם הווב בתלת מימד עם כלי הפיתוח החדשים של פיירפוקס 11"

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים