עריכת תבניות ועיצובים באמצעות FireBug
עבור מי שמתעסק בהמרת תבניות ועיצובים (לג'ומלה, WordPress או כל מערכת אחרת) או למי שרוצה לבצע שינויים שונים בתבנית שבשימושו, FireBug הוא פריט חובה בארגז הכלים.
FireBug הוא תוספת לדפדפן FireFox . לאחר ההתקנה הוא מופיע בתחתית המסך ומציג מידע רב אודות האתר בו נמצא הגולש. מעבר להודעות שגיאה, הוא מציג גם את הנתונים שאותם מעביר האתר לדפדפן, את הפונקציות וכן את קוד ה-HTML וקוד ה-CSS של האתר.
השימוש בו לעיצוב או לשינוי עיצוב קיים מקל מאד על המלאכה, מעבר להצגת הקוד (html ו-css) הוא גם מאפשר לערוך את הקוד כך שהתוצאות נראות במקום. כלומר, אפשר לראות איך שינוי ב-CSS מתבטא באתר, באופן מיידי. השינויים אינם נשמרים, כך לצד כל פקודה ב-CSS מצוינת השורה בה היא מופיע בקובץ, כך שאפשר לגשת לאחר מכן אל הקובץ, לבצע את השינויים ולשמור.
אפשרות מעולה שיש בו היא כפתור inspect, אשר מאפשר לחקור אלמנטים שונים באתר. לאחר לחיצה על inspect במעבר עם העכבר מעל אלמנטים שונים באתר, יוצג הקוד הרלוונטי אליהם. כלומר, כדי להבין איזה שורות משפיעות כל כותרת מאמר, מספיק לגעת בכותרת עם העכבר וכל שורות ה-CSS שמשפיעות על הכותרת יוצגו. צריך לראות כדי להבין ולהאמין עד כמה זה פשוט. אני מכיר מספר אנשים שעברו סופית להשתמש ב-FireFox רק בשביל הFireBug.
קשה להסביר על אופן העבודה עם FireBug צריך לראות את זה בעיניים ולכן הכנתי מדריך מצולם (לא ברמה מקצועית) אשר מדגים חלק מהיכולות (נראה לי שעדיף לראות אותו במסך מלא). התלהבתי והוספתי לו גם מוזיקת רקע שעשיתי ב-fruity loops.
הנה הוא לפניכם:
למי שרוצה להמר תבניות עיצוב לעברית אני ממליץ לעיין ולהסתייע במדריך שכתבתי להמרת תבניות ל-RTL (מדריך לג'ומלה ומדריך ל-WordPress) בשילוב העבודה ב-FireBug.
(No Ratings Yet)
Loading ...
תותח ! מדריך מצוין.
אין שום אפשרות בפיירבאג לשמור את השינויים השונים שעושים?
הלוואי שהיה אפשר לשמור, אולי תצא פעם גרסה שתשלב גישת FTP עם הפיירבאג ואז זה יהפוך לעורך אונליין.
מדהים !
בהחלט אשתמש בזה
זה יעשה לי חיים קלים
ולגבי שמירה אני לא חושב שזה כזה סיפור השמירה
בסך הכל להעתיק את הקוד CSS לאחר תיקון ולדרוס במקום הקובץ CSS הישן
אודי קבל ח"ח. אני משתמש בזה וזה בהחלט אחד הכלים היעילים ביותר
ארז* לא אודי. אל תאכל אותי (:
אתה תותח…(תשיר את זה בסגנון של שרית חדד)…
אהבתי את המוסיקה מ"פרוטילופ"
לפחות שהיו מאפשרים את אופציית השמירה על קבצים מקומיים… נו ניחא. בכל מקרה - מדריך מצוין.
תודה!
תודה, תודה, תודה.
לגבי המוזיקה, זה מתוך אוסף עיבודים שעשיתי בפרוטי ללהיטים משנות השמונים. מי מזהה את השיר?
לכל מי שלא מצליח לשמור.
אומנם אני לא ניסיתי את התוכנה,
לפי מה שהבנתי אפשר לשמור רק מקומית במחשב.
אולי יש אפשרות שבתוכנה של הFTP לעשות תיקיה
במחשב שהיא בעצם קיצור דרך לתיקיה בשרת
ואז לשמור בה את הקבצים וזה יהיה בעצם בשרת ?
אכן תוסף משובח ומצויין.
אין לי מילים וואו,
בודק ומשחק
תודה ארז, לא כל יום מכישים אותי בפיירפוקס
היום הכשת ובגדול!
צביקה
לגבי שמירת השינויים המקום למצוא כל מיני תשובות בנושא הוא זה:
http://groups.google.com/group/firebug/browse_thread/thread/5eab53a966b5a663/3ed28f4bec6aadd4?lnk=gst&q=save&rnum=7#3ed28f4bec6aadd4
אבל אני אישית לא מצאתי משהו מספק
אשמח לשמוע עידכונים
צביקה
לי יש שאלה אחרת שאשמח לקבל עליה תשובה.
כשעושים Inspect לאלמנט רואים את הגדרות הCSS שלו ואת הגדרות הHTML.
בCSS הוא מציין בדיוק מאילו קבצים לקוחות ההגדרות. יש מצב לדעת גם מאילו קבצים בדיוק הוא שואב את הגדרות הHTML?
אני מתנצל מראש על הבורות אני אומנם משתמש בפיירפוקס,
אבל לא יודע להגיע לשום תוספת אשמח לקבל מידע אך להוריד את ה-FireBug
[...] FireBug כתבתי עבר ואפילו הכנתי לו סרטון הדגמה מרוב התלהבות. קשה לי [...]
הוספת תגובה
תגובות אחרונות
דברו איתי
תגים
אתרים בלוג בלוגים בלוגר גוגל דרופל דרושים הפועל וורדפרס וידאו חינם חנות יהודים כלכליסט לא-קשור-ולא-מועיל מדריך מדריכים מערכות ניהול תוכן סקריפט עברית עיצוב עיתונאות פורטלים פלטפורמות חברתיות פרסום קוד-פתוח קורס-גומלה תבניות תבנית תמונות תפוז תרגום drupal firefox Joomla mini-site ning NRG phpizabi pluck rtl web-2.0 ynetפוסטים אחרונים
קטגוריות
ארכיון
מערכות ניהול תוכן
קישורים
עדכוני טוויטר
וידאו
מדורגים הכי גבוה
הכי מוגבים
הכי נצפים