עריכת תבניות ועיצובים באמצעות FireBug
עבור מי שמתעסק בהמרת תבניות ועיצובים (לג'ומלה, WordPress או כל מערכת אחרת) או למי שרוצה לבצע שינויים שונים בתבנית שבשימושו, FireBug הוא פריט חובה בארגז הכלים.
FireBug הוא תוספת לדפדפן FireFox . לאחר ההתקנה הוא מופיע בתחתית המסך ומציג מידע רב אודות האתר בו נמצא הגולש. מעבר להודעות שגיאה, הוא מציג גם את הנתונים שאותם מעביר האתר לדפדפן, את הפונקציות וכן את קוד ה-HTML וקוד ה-CSS של האתר.
השימוש בו לעיצוב או לשינוי עיצוב קיים מקל מאד על המלאכה, מעבר להצגת הקוד (html ו-css) הוא גם מאפשר לערוך את הקוד כך שהתוצאות נראות במקום. כלומר, אפשר לראות איך שינוי ב-CSS מתבטא באתר, באופן מיידי. השינויים אינם נשמרים, כך לצד כל פקודה ב-CSS מצוינת השורה בה היא מופיע בקובץ, כך שאפשר לגשת לאחר מכן אל הקובץ, לבצע את השינויים ולשמור.
אפשרות מעולה שיש בו היא כפתור inspect, אשר מאפשר לחקור אלמנטים שונים באתר. לאחר לחיצה על inspect במעבר עם העכבר מעל אלמנטים שונים באתר, יוצג הקוד הרלוונטי אליהם. כלומר, כדי להבין איזה שורות משפיעות כל כותרת מאמר, מספיק לגעת בכותרת עם העכבר וכל שורות ה-CSS שמשפיעות על הכותרת יוצגו. צריך לראות כדי להבין ולהאמין עד כמה זה פשוט. אני מכיר מספר אנשים שעברו סופית להשתמש ב-FireFox רק בשביל הFireBug.
קשה להסביר על אופן העבודה עם FireBug צריך לראות את זה בעיניים ולכן הכנתי מדריך מצולם (לא ברמה מקצועית) אשר מדגים חלק מהיכולות (נראה לי שעדיף לראות אותו במסך מלא). התלהבתי והוספתי לו גם מוזיקת רקע שעשיתי ב-fruity loops.
הנה הוא לפניכם:
למי שרוצה להמר תבניות עיצוב לעברית אני ממליץ לעיין ולהסתייע במדריך שכתבתי להמרת תבניות ל-RTL (מדריך לג'ומלה ומדריך ל-WordPress) בשילוב העבודה ב-FireBug.
תותח ! מדריך מצוין.
אין שום אפשרות בפיירבאג לשמור את השינויים השונים שעושים?
הלוואי שהיה אפשר לשמור, אולי תצא פעם גרסה שתשלב גישת 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 כתבתי עבר ואפילו הכנתי לו סרטון הדגמה מרוב התלהבות. קשה לי [...]
האם יש חדש בקשר לשמירה בפיירבאג?
אפשר לדעת לאן לשייך את קוד הHTML שבחלון הימיני?
ליאיר: שום כלי לא יכול לדעת בצד הלקוח מאיפה מגיע ה-HTML – ברוב המערכות כיום ה-HTML מופק משלל שברי קבצים, משלל מערכות ובשלל שפות – זו אותה "הדינמיות" הידועה לעומת אתר סטטי.
בסופו של דבר הדפדפן מקבל קובץ HTML אחד להצגה – ובפועל עבורו משם מגיע ה-HTML – ואת זה כמובן אפשר לראות דרך ה-View Source
בקשר לשמירה מפיירבאג: אינני מכיר שום טכניקה כיום, זה גם נראה לי מאוד מורכב תכנותית. אז יאללה, די להתעצל, ניאלץ כרגע להסתפק בהעתקת התכונות ידנית לקוד. עדיין, יחסית לצורת העבודה לפני פיירבאג – זה חוסך שעות.
יהודה
מבחינת ההתעסקות ו"מה אני עושה כל היום" , פיירבאג החזיר אותי לימים שלפני 79 שנה טרם המציאו את העריכה הגרפית לHTML והייתי בונה אתר עם נוטפד.
… מאוד התגעגעתי לזה מזכיר לי ימים טובים.
ואני מסכים איתך שפיירבאג עוזר לעבודה אבל …
כשאני רואה את העיצובים המרהיבים של התבניות ברחבי הגלובוס יש לי תחושה שיש "תוכנה אמיתית" של מעצבי אתרים שיודעת לעשות הכל דרך מסך עריכה גרפית, ורק את פיירבאג שחררו לציבור…
אני גם לא נגעתי במחשב איזה חמש שנים… ואומרים ש"תחום המיחשוב מתקדם בצעדי ענק" אז זה נראה לי קצת מוזר שהגענו פה רק עד "פיירבאג".
נכון לעכשיו, אני עובד איתו כבר שבוע. ובהעדר כלי אחר – אז הוא אחלה כלי.
כמו "Paint brush"
"כשאני רואה את העיצובים המרהיבים של התבניות ברחבי הגלובוס יש לי תחושה שיש "תוכנה אמיתית" של מעצבי אתרים שיודעת לעשות הכל דרך מסך עריכה גרפית, ורק את פיירבאג שחררו לציבור…"
אהבתי
אולי, מי יודע…
אבל לא באמת… התחום אכן התקדם בצעדי ענק, אך צר המקום מלהכיל הסבר ממצה, שיענה על שאלותיך וידביק את 5 השנים
למעשה אותה התקדמות טכנולוגית רק מפחיתה את היכולת לשלוט בצורה מרכזית (כמו דרך תוכנה) באתר, בטח מבחינת ה-HTML. כפי שכבר אמרתי, ברוב המערכות הדינמיות אין כלל מקור אחד ל-HTML, הוא בכלל משולב בקוד אחר (PHP, ASP וכד'), ואף מפתח לא יודע מראש איך הכל יראה במדויק – רק בדפדפן עצמו, כשהדף מורכב ומוגש.
בעבר היית רואה כעת את הבאג, ניגש נניח לרסיס ה-PHP עליו אתה עובד (אם צריך לשנות HTML) או ל-CSS, משנה את הקוד, לעיתים אף מעלה לשרת, ומטעין שוב – רק כדי לגלות שפיספסת בפיקסל. פיירבאג מקצר כל זאת – הוא מאפשר לך להגיע לתוצאה מושלמת במקומות רבים – ואז לעדכן במכה אחת את הקוד.
מה שכן, אני אכן מאמין שמתישהו נראה כלי שמחבר את פיירבאג למערכת הקבצים הלוקאלית, ומשם הדרך פתוחה גם ל-FTP ולרשת.
ולגבי עורכי HTML: *אין* עורך ויזואלי שעושה עבודה מושלמת. בתור התחלה, מלתחילה מפתחי התוכנה בחרו עבורה מנוע רינדור פנימי לדף: כבר החלטה שקובעת לאיזה דפדפן אתה מפתח. מעבר לכך, כנראה שבניית קוד נקי ואלגנטי, בצורה אוטומטית, עפ"י פרונט ויזואלי היא פשוט משימה כבירה מידי.
רק תראה כמה שנים (כ-15!) ומיליארדים לקח למיקרוסופט האדירה, לנטסקייפ בשעתה ולמוזילה אחריה, על כל אלפי מפתחיה, להצליח להשתלט על הצגה פשוטה (!) של קוד CSS או HTML בדפדפן שלהם – למעשה רק הדור הבא של הדפדפנים יעמוד במבחן ה-ACID TEST הידוע.
עורך קוד ויזואלי הוא הרבה יותר מורכב מהצגה בלבד של קוד – ואינני רואה בקרוב מערכת שתחליף בצורה מושלמת את מגעו של המפתח.
*אבל*, אם אתה צריך אתר פשוט וסטטי, בלי PHP ו-FTP וקקמייקה, אתה יכול להשתמש בלב שקט בדרימויבר CS3 ומעלה – הוא מייצר יחסית קוד נקי ומדויק (שפה אחרת: תואם סטנדרטים, תודות למנוע רינדור תותחי) – ואז אינך זקוק לדפדפן או לפיירבאג, לפחות לא עד הסוף ממש.
מקווה שזה מובן, כל הסלט הזה באמצע הלילה.
מובן מאוד
1. לדפים סטטים עם עברית, מה עדיף פרונטפייג או דרימויבר?
2. השאלה הגדולה היא האם עורך דפים סטטי יכול לעזור לעיצוב תבנית, האם אפשר להטמיע עיצובים מעורך…
מישהו בשולחן שבת אצל חברים אמר לי שכן, מה דעתך יהודה
1. אין לי נסיון בפרונטפייג', ולמעשה גם לא לאף אחד שאני מכיר. למיטב הבנתי MS גם הוציאו עכשיו חבילת תוכנה חדשה לכל זה, אקספרשן ווב, כבר יש גירסה 2 שלו
http://www.microsoft.com/expression/products/Overview.aspx?key=web
חלק מחבילת האקספרשן
http://www.microsoft.com/expression
2. לא ממש הבנתי את שאלתך… אבל מובן שהתוכנות האלה מיועדות לפיתוח תבניות שחוזרות על עצמן בין דפים, ומאוד מסייעות בכך – כולל עדכון רק החלקים שמשתנים בכל דף.
בהצלחה
נראה לי שבניה ועיצוב תבניות אפשר לעשות בתוכנת artusteer (שלא תומכת עברית)
ואחרי זה לשחק עם הCSS ולהפוך לעברית עם פיירבאג
יש למישהו כאן דיעה בעניין הזה אם אני צודק
(אני מתכנן לקנות את תוכנת artisteer בשביל זה)
http://www.artisteer.com/?p=demo
הי ארז
אני עושה את צעדי הראשונים ב-WP והדבר הראשון שלמדתי היום זה תבניות ובאמת שמתי לב שיש כאלה מעט בעברית, או שפשוט לא חיפשתי מספיק. תוסף הפיירבג הוא מדהים וברצוני להודות לך על סרטון מעולה שעשית על לימוד השימוש בפיירבג.
ישבת והקדשת לזה זמן ועל כך – כל הכבוד לך, עזרת לי מאוד.
בכבוד רב,
אמיר כהן
[...] ולשנות בזמן ריצה את קוד האתר (HTML ו-CSS) לראות את התוצאות באופן מיידי על המסך. כיום לכרום יש את הכלים שלו ל-Debuging של האתר ויש כאלו [...]
למרות שהפוסט ישן, אני נתקלתי בו רק היום
כל הכבוד לך, על כל הבלוג בכלל ועל הסרטון הזה בפרט
האם מאז 2008 יש "פטנט" חדש ומתקדם יותר ?
אני רוצה לבצע שינויים ישירות לתבנית ב WP . האם מומלץ לבצע את השינויים ישירות בתבנית או יש דרך אחרת ? (קראתי משהו על יצירת תבנית בת)
האם כדאי לשנות את שמה לפני שמתקינים אותה ואז לבצע שינויים שלא יהיה לי בעיות עם עדכונים ?