שיחה ההאקר Emad
11 באוגוסט 2012 – 21:50 | 31 תגובות

קבוצת ההאקרים הפועלת תחת שמו של אימעד מורניה, RememberEmad, ופרסמה כי פרצה לשרתי חברת ההוסטינג WebGate, פרסמה היום קובץ נוסף ובו כ-500 פרטים נוספים ובהם שמות משתמש וסיסמאות של אתרים שאוחסנו ב-WebGate. נראה כי העימות בן קבוצת …

המשך קריאה »
geek

חנון זה מגניב. תרבות החיים האינטרנטית-טכנולוגית-גאדג'טית. הדברים שמבדילים את הנערים מהגברים.

הרשת

סיפורים מהרשת, בעיקר זו הישראלית. מה קורה, מי קורה ולמה קורה.

וורדפרס

בעיקר תבניות מתורגמות לעברית ולפעמים דברים שקשורים לבלוגים ובלוגרים.

מערכות ניהול תוכן

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

פלטפורמות חברתיות

על רשתות חברתיות, כלים לבניית רשתות ופלטפורמות חברתיות וכל מה מכונה web 2.0

ראשי » מדריכים, מערכות ניהול תוכן

עריכת תבניות ועיצובים באמצעות FireBug

מאת ארז וולף בתאריך 28 בספטמבר 2007 – 2:2527 תגובות

FireBugעבור מי שמתעסק בהמרת תבניות ועיצובים (לג'ומלה, WordPress או כל מערכת אחרת) או למי שרוצה לבצע שינויים שונים בתבנית שבשימושו, FireBug הוא פריט חובה בארגז הכלים.

FireBug הוא תוספת לדפדפן FireFox . לאחר ההתקנה הוא מופיע בתחתית המסך ומציג מידע רב אודות האתר בו נמצא הגולש. מעבר להודעות שגיאה, הוא מציג גם את הנתונים שאותם מעביר האתר לדפדפן, את הפונקציות וכן את קוד ה-HTML וקוד ה-CSS של האתר.

השימוש בו לעיצוב או לשינוי עיצוב קיים מקל מאד על המלאכה, מעבר להצגת הקוד (html ו-css) הוא גם מאפשר לערוך את הקוד כך שהתוצאות נראות במקום. כלומר, אפשר לראות איך שינוי ב-CSS מתבטא באתר, באופן מיידי. השינויים אינם נשמרים, כך לצד כל פקודה ב-CSS מצוינת השורה בה היא מופיע בקובץ, כך שאפשר לגשת לאחר מכן אל הקובץ, לבצע את השינויים ולשמור.

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

קשה להסביר על אופן העבודה עם FireBug צריך לראות את זה בעיניים ולכן הכנתי מדריך מצולם (לא ברמה מקצועית) אשר מדגים חלק מהיכולות (נראה לי שעדיף לראות אותו במסך מלא). התלהבתי והוספתי לו גם מוזיקת רקע שעשיתי ב-fruity loops.
הנה הוא לפניכם:

למי שרוצה להמר תבניות עיצוב לעברית אני ממליץ לעיין ולהסתייע במדריך שכתבתי להמרת תבניות ל-RTL (מדריך לג'ומלה ומדריך ל-WordPress) בשילוב העבודה ב-FireBug.

קרא פוסטים נוספים בנושא זה:

שתף את הפוסט בטוויטר

27 תגובות »

  • מאת אריק:

    תותח ! מדריך מצוין.
    אין שום אפשרות בפיירבאג לשמור את השינויים השונים שעושים?

  • מאת וולף ארז:

    הלוואי שהיה אפשר לשמור, אולי תצא פעם גרסה שתשלב גישת FTP עם הפיירבאג ואז זה יהפוך לעורך אונליין.

  • מאת אנימה:

    מדהים !
    בהחלט אשתמש בזה
    זה יעשה לי חיים קלים

    ולגבי שמירה אני לא חושב שזה כזה סיפור השמירה

    בסך הכל להעתיק את הקוד CSS לאחר תיקון ולדרוס במקום הקובץ CSS הישן

  • אודי קבל ח"ח. אני משתמש בזה וזה בהחלט אחד הכלים היעילים ביותר :)

  • ארז* לא אודי. אל תאכל אותי (:

  • מאת yest:

    אתה תותח…(תשיר את זה בסגנון של שרית חדד)…

  • מאת מתן ריכמן:

    אהבתי את המוסיקה מ"פרוטילופ" :)

  • מאת אריק:

    לפחות שהיו מאפשרים את אופציית השמירה על קבצים מקומיים… נו ניחא. בכל מקרה – מדריך מצוין.

    תודה!

  • מאת וולף ארז:

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

  • מאת מתן ריכמן:

    לכל מי שלא מצליח לשמור.
    אומנם אני לא ניסיתי את התוכנה,
    לפי מה שהבנתי אפשר לשמור רק מקומית במחשב.
    אולי יש אפשרות שבתוכנה של ה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 . האם מומלץ לבצע את השינויים ישירות בתבנית או יש דרך אחרת ? (קראתי משהו על יצירת תבנית בת)
    האם כדאי לשנות את שמה לפני שמתקינים אותה ואז לבצע שינויים שלא יהיה לי בעיות עם עדכונים ?

הוסף תגובה!

עליך להיות מחובר כדי להוסיף תגובה.

124 queries in 0.305 seconds.