
עיצוב אתר באמצעות כלי המפתחים של כרום
מפתחי האתרים הוותיקים שביננו ודאי זוכרים את הימים בהם גילוי ותיקון תקלות CSS הצריך עבודת בלשות לא פשוטה. המעבר האינסופי בין הדפדפן לקוד ובחזרה כדי לבדוק אם שינוי כלשהו ל-CSS גרר את התוצאה הרצויה בדפדפן הפך את העבודה של בניית אתרים לתהליך ארוך ומייגע. לשמחתנו, היום אנחנו כבר לא צריכים להתמודד עם הבעיות הללו, משום שרוב הדפדפנים הפופולאריים (ספארי, כרום, פיירפוקס וכו׳) מגיעים עם ערכת כלים מובנית שנקראת ״כלי המפתחים״ (Developer Tools). ערכה זו מכילה הרבה כלים שימושיים למפתחי אתרים שמאפשרים ניתוח ושינוי של האתר בזמן אמת.
אחד הכלים בחבילה הזו מאפשר עריכה של מבנה ועיצוב האתר. היתרון של כלי זה על כלים אחרים הוא היכולת לעצב את האתר בתוך הדפדפן ולצפות בשינויים בזמן אמת ללא רענון של הדף. בניגוד לתוכנות כמו Dreamweaver שמשתמשות במנוע גראפי משלהן בשביל ליצור תצוגה מקדימה של האתר (שהיא בדרך כלל שונה לחלוטין מהמראה של האתר בדפדפן), כאן נעשה שימוש במנוע הגראפי של הדפדפן שמעדכן את נראות האתר בעקבות כל שינוי שנעשה על ידי המשתמש. התוצאה היא תצוגה מקדימה המשקפת במאה אחוז את המראה של האתר לאחר הרצת הקוד. את השינויים שמבצעים בדפדפן, ניתן להעתיק אחר כך לקובץ ה-CSS של האתר, או לסנכרן בין הדפדפן לקובץ ה-CSS באופן אוטומטי (עוד על כך בהמשך המאמר).
הפעלה ושימוש
בשביל להפעיל את כלי המפתחים, לחצו על הסמל של שלושת הקווים מימין לשורת החיפוש:
לאחר מכן, לחצו על More Tools ואז Developer Tools:
לחיצה על Developer Tools תפתח חלון פנימי בתחתית הדף:
חלון זה מחולק לשניים – החלק השמאלי מציג את ה-DOM (שלד המסמך – Document Object Model) והחלק הימני מציג את ה-CSS של האלמנט הנבחר. לחיצה ימנית בכל מקום במסמך, ואז לחיצה על Inspect בתפריט שנפתח, תראה לכם את ה-CSS של אותו אלמנט ואת מקומו ב-DOM:
ניתן לערוך את מאפייני ה- CSS של אותו אלמנט בצד ימין, והשינויים יעודכנו באופן מיידי בדפדפן. בנוסף, ניתן גם לערוך את ה-HTML של האלמנט, להוסיף לו אטריביוטים, לשנות את מיקומו על ידי גרירה, או למחוק אותו.
כל שינוי שנעשה למסמך הוא שינוי זמני בלבד שלא נשמר אם נרענן את הדף. בהמשך נראה איך ניתן לשמור את השינויים לקובץ המקורי באופן אוטומטי.
ניתוח ועיצוב בזמן אמת
בשביל להראות את היכולות של כלי זה, ניצור אתר פשוט המורכב מ-HTML ו-CSS ונכניס בו שגיאה. לאחר מכן נשתמש בכלי המפתחים בשביל לאתר את השגיאה ולתקן אותה. להלן הקוד:
<!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" href="style.css"/> </head> <body> <div class="wrapper"> <h1>Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>
body { background: #ecf0f1; } .wrapper { width: 300px; margin: 30px auto; padding: 15px; border: 1px solid #bdc3c7; border-radyus: 10px; background-color: white; box-shadow: 0 0 12px black; } .wrapper h1 { text-align: right; } .wrapper p { text-align: justify; }
אם נפתח את האתר שלנו בכרום, הוא ייראה כך:
לא רע, אבל חסר משהו. הגבולות של האלמנט .wrapper
היו אמורים להיות מעוגלים, אך משום מה הם לא מעוגלים, אלא מרובעים. מה עושים? אפשר ללחוץ לחיצה ימנית על האלמנט ואז Inspect, או להשתמש ב-element selector (צד שמאל בחלק העליון של כלי המפתחים) בשביל לבחור אותו:
כפי שניתן לראות, ישנה תקלה במאפיין שאחראי על עיגול הפינות, והדפדפן פשוט מתעלם ממנו:
אם נלחץ על המאפיין, נוכל לערוך אותו ולתקן את הטעות. בנוסף, בצד ימין למעלה ניתן לראות את שם הקובץ שבו נכתב המאפיין, ואפילו את השורה (במקרה שלנו, הקובץ הוא style.css
והשורה היא 5):
והתוצאה:
יותר טוב, אבל עדיין חסר משהו. הצל של האלמנט קצת חזק מדי, וזה יוצר אפקט חזותי לא אמין. לשמחתנו, ניתן לשנות את הצבע של הצל ישירות בדפדפן על ידי לחיצה על הקוביה השחורה שליד המאפיין box-shadow
:
מעולה, עכשיו זה נראה יותר אמין. כל שנותר לעשות הוא להעתיק את השינויים שלנו לקובץ המקורי, ולשמור אותו. בלי לשמור את השינויים במקור, כל העבודה שלנו תרד לטמיון. לחצו על שם הקובץ שלצד המאפיינים:
הקובץ המחודש (עם השינויים המקומיים) יפתח לכם בלשונית הנקראת Sources, שם תוכלו לשמור את הקובץ במקום הקובץ הישן שלכם:
סנכרון אוטומטי
השיטה הקודמת לשמירת שינויים יכולה להיות מייגעת כשמדובר בכמות גדולה של שינויים. לשם כך ניתן להוסיף את תיקיית הפרוייקט שלנו ל-workspace של כרום, ולמפות את הקבצים כך שכל שינוי בדפדפן יעדכן את המקור (לאחר שמירה). תחת הלשונית Sources לחצו לחיצה ימנית ובחרו ב- Add Folder To Workspace:
בחרו בתיקייה המכילה את הקבצים של הפרוייקט שלכם, ולחצו על Select. לאחר מכן לחצו על Allow בלשונית הצהובה שתופיע מתחת לשורת החיפוש:
התיקייה של הפרוייקט נוספה לדפדפן, אך הדפדפן עדיין משתמש בקבצים הזמניים ולא בקבצי המקור. לשם כך עלינו למפות את הקבצים שמריץ הדפדפן לקבצי המקור שבתקיית הפרוייקט. בצד שמאל, לחצו לחיצה ימנית על הקובץ Style.css
ואז לחצו Map to File System Resource:
בחרו מתוך התיקייה בקובץ המתאים:
כך נוצר קשר בין הקובץ המקורי לזה שמוגש על ידי הדפדפן. אם נבצע שינויים בדפדפן, נראה כוכבית לצד הקובץ שבו בוצעו השינויים:
שמירה של השינויים תעדכן את הקובץ המקורי שעל הדיסק הקשיח. ניתן לשמור על ידי לחיצה על Ctrl+S (או Command+S במחשבי מאק). באותה מידה, שינויים שיבוצעו ממקור חיצוני יעודכנו באופן אוטומטי בדפדפן ללא צורך ברענון של העמוד. יכולות העריכה אינן מוגבלות לקבצי CSS בלבד. למעשה, ניתן לערוך כל קובץ שתרצו בתוך הדפדפן!
מי שמפתח באמצעות NetBeans, יכול להשתמש בתוסף של כרום הנקרא NetBeans Connector. תוסף זה מאפשר סנכרון אוטומטי בין כלי המפתחים של כרום לבין NetBeans, ויוצר סביבת עבודה נוחה מאד לבניית אתרים או לפיתוח אפליקציות באינטרנט.
DevTools Vs Photoshop
השיפור ביכולות של שפת ה-CSS, לצד כלים כמו Chrome DevTools, הפכו את תהליך עיצוב ותכנון האתר להרבה יותר פשוט מבעבר, עד לנקודה שכיום כבר כמעט ואין צורך בתוכנות כמו Photoshop בשביל ליצור את גראפיקת האתר. בעבר, יצירת גבולות מעוגלים והצללה היו מצריכים יצירת תמונות סטטיות על ידי כלים כמו פוטושופ. כיום, כלי המפתחים מקנה יכולות עריכה עוצמתיות כמו אלה של Photoshop, והיתרון העיקרי שלו הוא שהוא מאפשר לדלג על שלב ההמרה מקובץ ה-PSD לקוד, שכן הכל נכתב בקוד מלכתחילה. זהו חיסכון עצום בזמן ומשאבים. יתרה מכך, כלי המפתחים מאפשר גם התאמה של העיצוב למכשירים ניידים על ידי סימולציה, מה שהופך אותו לפלטפורמה המושלמת לפיתוח אתרים.
עם זאת, כלי המפתחים של כרום לא יכול להוות תחליף לשלב האיפיון והעיצוב של האתר. כשלא מפרידים בין תהליך העיצוב לתהליך כתיבת הקוד, העיצוב עלול להיות מושפע מצרכי המפתח ועלול לפגוע בתוצאה הסופית. שימוש בפוטושופ מאפשר התמקדות בעיצוב מבלי לחשוב על איך זה יתבצע בסופו של דבר בקוד, מה שמביא לתוצאה איכותית יותר (תודה למתן על שהסב את תשומת ליבי לכך).

הסבר מעולה יואב
הזכרת שמומלץ לבנות את האתר על המחשב תחילה
ניסיתי להתקין לצורך זה xampp וכן wampserver בראשון אינני מצליח להיכנס לשרת המקומי (מקבל error אפילו שסגרתי את סקייפ בהתקנה) ובשני הוא פשוט לא פועל לאחר ההתקנה. מראה נורית אדומה או כתומה לא ירוקה. יש לך רעיון לפתרון או המלצה על תוכנה אחרת לבניית האתר על המחשב?
אני אישית משתמש ב- MAMP, יש לי ניסיון מאד חיובי איתו. כמעט ולא היו לי תקלות ואני משתמש בו הרבה שנים. בדרך כלל מה שקורה זה שה-port תפוס על ידי אפליקציה אחרת. זה לא אמור לקרות, אבל אם זה קורה אתה יכול לשנות את ה-port בהגדרות של MAMP.
א- איך מחליפים הגדרות PORT ב- ולאיזה מספר לשנות?
ב-MAMP זה נמצא תחת Preferences -> Ports. אני ממליץ קודם כל לכבות לחלוטין את סקייפ ולהדליק מחדש את המחשב (תוודא שסקייפ לא מופעל באופן אוטומטי כשמערכת ההפעלה מתחילה). אם זה לא עובד תשנה את ה-port. תשתמש ב-80 או 8888 ל-Apache
תודה – אני מוריד את התוכנה עכשיו. אבדוק. דרך אגב התגובה שלך האחרונה נכנסה לי למייל לא מקודדת. יצאו תווים לא ברורים. באתר זה בסדר. מענין שבתגובה הקודמת שלך זה נכנס למייל בסדר.
התקנתי את MAMP כיביתי סקייפ כיביתי מחשב מקבל את זה http://3.bp.blogspot.com/-cpmzFO4by_Y/VpYNnWZVNAI/AAAAAAAAIpA/bFJEQY52xuo/s1600/%25D7%259C%25D7%259B%25D7%2599%25D7%2593%25D7%2594.JPG11.JPG
ניסתי לשנות ל 8888 כפי שאמרת עדיין נותן את אותה הודעה כמו התמונה?
אני מעביר את שאלתך לעמוד השאלות, נמשיך שם
תודה רבה מדריך מעולה
האם יש דרך לקשר את הCSS לדוגמא לקובץ שנצא על שרת?
לא, ניתן לקשר רק לקבצים מקומיים. את פיתוח האתר אתה צריך לעשות באופן מקומי על המחשב שלך, ואז להעלות את הקבצים לשרת בסיום התהליך.
" והיתרון העיקרי שלו הוא שהוא מאפשר לדלג על שלב ההמרה מקובץ ה-PSD לקוד" האם תוכל להסביר את המשפט הזה?
כשהעיצוב של האתר נעשה בפוטושופ, יש צורך להמיר את קבצי ה-PSD לקוד HTML ו-CSS. ההמרה נעשית באופן ידני על ידי בניית השלד ב-HTML ועיצובו ב-CSS כך שיתאים למראה של קובץ ה-PSD. אפילו אם משתמשים בכלים שעושים זאת באופן אוטומטי, התוצאה אף פעם לא מושלמת ותמיד צריך לתקן דברים מסויימים באופן ידני. ככל שיש יותר דפים להמיר, כך התהליך ארוך יותר. לעומת זאת כשמעצבים בדפדפן, העיצוב נעשה מלכתחילה בקוד, ולכן אין צורך בהמרה הזו.
הבעיה לעצב בדפדפן זה שאין לך השלמה אוטומטית ל HTML וזה קטן ולא נוח יותר מאשר עורך טקסט כמו netbeans וכאלה
ותודה על הפוסט המעולה הזה. לא ידעתי שאפשר לשמור שינויים היישר בדיסק קשיח בקובץ המקור
ממש אהבתי את זה
תודה רבה !
נכון, גם אני מעדיף את NetBeans, בעיקר עם Netbeands Connector. ניסית אותו? יש קישור במאמר
אי אפשר ליצור אתר דרך כתיבה, דרוש תהליך שלם של אפיון שכולל פרוטוטייפים שונים ושינויים רבים במבנה ובתוכן, כמו כן גם אתר מעצבים עם תוכן ולרב לפי גישת מובייל פירסט, אז כתיבה ישר על הדבלופר טולס היא נוחה מאוד למפתחים, והיא חוסכת לי שעות על גבי שעות של עבודה, אבל היא לא מחליפה את הפוטושופ או את התהליך שצריך אתר לעבור עד שהוא מגיע לפוטושופ, שלא לדבר על זה שהמעצב הוא גם מפתח? במידה וזה קורה צריך להידלק נורה אדומה וצריך לברר אם הוא מקצועי בשני העולמות האלה. (ולא דיברתי על אפיון)
אתה צודק מתן, כדאי להפריד בין תהליך העיצוב לבין כתיבת הקוד, אחרת העיצוב עלול להיות מושפע מצרכי המפתח. את הנ״ל כתבתי מנוקדת מבט של מפתח שגם עוסק בעיצוב לפעמים, אבל בדיעבד למדתי שבשביל מוצר איכותי צריך להפריד בין השניים. אני אעדכן את המאמר.