כלים שימושיים כדי לבדוק את אלמנטים עיצוביים של אתר אינטרנט (וללמוד את הפרטים פינר של עיצוב אתרים)
אתרי אינטרנט אטרקטיביים הם, בדרכם שלהם, מיני מופת של עידן האינטרנט. התאמה אישית יכולה להיות קלה או מורכבת ככל שתרצה, החל שינוי נושא וורדפרס לפיתוח המראה של האתר מתחילתו ועד סופו.
לאחר מכן, אתה צפוי להיתקל אלמנטים אתה נהנה וצבעים אתה רוצה לעשות שימוש חוזר בפרויקטים שלך. במאמר זה נראה לך את היסודות לקבלת אתרי אינטרנט כדי לספר לך כל מה שאתה רוצה לדעת.
מה הצבע?
ColorZilla
נוצר במקור עבור פיירפוקס, ColorZilla מאז הפך זמין ב- Chrome ודפדפנים הקשורים אליו גם כן.
לאחר ההתקנה, תמצא לחצן נוסף בממשק המשתמש עבור שני הדפדפנים. כפתור זה נותן לך את היכולת לגלות את הצבע של כמעט כל דבר באינטרנט. תוכל במהירות להבין כי ColorZilla עושה הרבה יותר מאשר רק לזהות צבעים כמו זה כולל תמיכה עבור לוחות צבעים גם כן.
מהו הגופן?
WhatFont? (Chrome)
למען הדיוק, אתה לא צריך את WhatFont? הרחבה כדי לגלות את הגופן של אתר אינטרנט, אבל זה ללא ספק הדרך המהירה ביותר לעשות זאת. החלופה היא לפתוח את גיליון הסגנונות ולצאת דרכו.
התקן את WhatFont? ותראה סמל חדש בממשק המשתמש של הדפדפן שלך. אלא אם תפעיל מחדש את הדפדפן לחלוטין, יהיה עליך לרענן את הדף שבו תרצה לזהות את הגופנים. לאחר שתעשה זאת, לחץ על הלחצן בדפדפן שלך.
לחצן חדש אמור להופיע בפינה השמאלית העליונה של דף האינטרנט, וכאשר אתה מעביר את העכבר מעל לטקסט, יש להציג את שם הגופן. לחיצה על הגופן תספק מידע נוסף הקשור לשינוי גודל. זה יהיה גם לזהות את גופנים אחרים של "מחסנית" וזה נוח אם אתה רוצה לראות אילו חלופות מפתחי אינטרנט לשקול את הגופן המיועד שלהם.
גופן Finder (Firefox)
הרחבה בלעדית ב- Firefox באותו כיוון כמו ה- WhatFont של Chrome?
התקן את התוסף, ותוכל לבחור באפשרות חדשה בתפריט ההקשר באמצעות לחצן העכבר הימני.
כאשר אתה מוצא משהו שאתה רוצה מזוהה, להדגיש אותו, ולאחר מכן להעלות את האפשרויות העומדות לרשותך. "נתח בחירה" יספר לך כל מה שרצית לדעת.
פרט זה מספק לא פחות מ-הלסת נופלת. אם הטקסט מסומן כ- "(ערימה)", הוא יבחר את הגופן הראשון בערימה שהתקנת. ערימות בדרך כלל מסתיימות עם מונח כללי, כמו "sans-serif" בדוגמה לעיל. באירוע בלתי סביר אחד הגופנים האחרים בערימה אינו מותקן, זה יהיה ליפול על ברירת המחדל של המערכת שלך sans-serif פנים.
ניתן גם להתאים אישית אלמנטים גם באמצעות האפשרות "התאמת אלמנט". לאחר ההרחבה מנחה אותך להיכנס למשפחת גופנים, אתה יכול להשתולל. בדוגמה שלנו שינינו כמעט כל גופן בוויקיפדיה למשהו אחר, ויצר את המחרוזת המוזרה המוצגת. שינויים אלה אינם קבועים ונעלמים בעת טעינה מחדש של הדף.
"החלף את הגופן (DOM כולו)" מאפשר לך לשנות כל מופע של גופן בדף. לא מעריץ של רובוטו (שבו אנו משתמשים כמו sans-serif הראשי שלנו)? הדגש אפשרות זו, לחץ על "Roboto" מרשימת הגופנים שמופיעים בדף, והקלט את שם הגופן שבו אתה מעדיף לראות. שוב, זה לא קבוע, אבל זה מאפשר לך לשחק עם העיצוב של אתרי האינטרנט המועדפים שלך, גם אם רק באופן זמני.
מדידת אתר
סרגל סרגל (Chrome)
"סרגל? באמת? "אנחנו שומעים אותך שואל. עמוד שליט הוא סרגל המסך שהוא קצת שונה איך זה נשמע. למעשה, היינו מבינים לחלוטין כל ספקנות ראשונית.
מיקום העניינים באינטרנט. אלמנטים של הדף צריך להיות מרווחים רק כך, או שהם לא מושך כמו שהם יכולים להיות. בעוד מידע זה הוא אזוטרי במיוחד רוצה לדעת, עמוד שליט מאפשר את זה.
התקן אותו כמו שתוסיף לתוסף אחר, ויהיה לך לחצן נוסף בממשק המשתמש של הדפדפן שלך. שים לב שיהיה עליך לפתוח דף אינטרנט כדי לנסות את התוסף - לא תוכל להשתמש באחד מדפי האינטרנט המובנים של Chrome מסיבות אבטחה.
לאחר שתלחץ על הלחצן, תקבל רצועת מידע נוספת ישירות מתחת לשורת הכתובת, ותוכל להשתמש בעכבר כדי ללחוץ ולגרור צורה, שמידותיה יחושבו ויוצגו לאורך הסרגל הנ"ל . מעבר לכך יש לך גם את האפשרות להפעיל או לבטל את הרשת, למרות שזה יכול לעזור עם דיוק.
אם תרצה, תוכל גם לשנות את צבע המלבן מהכחול המוגדר כברירת מחדל. ללא קשר לצבע שתבחר, הוא יוסיף באופן אוטומטי מידה מסוימת של שקיפות, כך שתוכל לראות את התוכן שמתחתיו.
עמוד Ruler מגיע קצת קרדיט על כך שיש גישה מינימליסטית במיוחד על התכונות שלו, אריזה את כל המידע החיוני לתוך בר קטן לאורך החלק העליון של החלון.
MeasureIt (Firefox ו- Chrome)
MeasureIt עושה את אותה משימה כמו 'סרגל דפים' וזמין הן ל- Firefox והן ל- Chrome.
לאחר ההתקנה, לחץ על הלחצן, ותוכל ללחוץ ולגרור כדי ליצור מלבן. לצד המלבן יהיה ספירת פיקסלים, כלומר אתה יכול לקבל מדידות מדויקות עבור מיקום.
אם אתה חושש לקבל את המידות הנכון עם העכבר, אתה יכול לשנות את גודל השטח המודגש באמצעות מקשי החצים, מה שהופך את הדיוק הרבה יותר קל ממה שזה נשמע. היינו מציעים לבדוק את האפשרות "שטח" בהגדרות; זה לא משנה איך התוכנה עובדת, והוא רק נותן לך מושג על האזור המלבן שצייר לוקח.
אנחנו מתערב שאתה תהיה מופתע כאשר אתה רואה רק כמה פיקסלים הם על המסך ואת האזור שהם ממלאים כאשר מודגשת. אם שום דבר אחר, זה בהחלט צריך לשים את המושג "מסך הנדל"ן" בפרספקטיבה.
סיכום
זה לוקח זמן כדי לקבל את הטוב ביותר מן הרחבות אלה, אבל הם מכניסים קצת מידע גדול בהישג יד. אתה במהירות לבוא להתמודד עם אותם, אבל אם אתה מתקשה להחליף גופנים, לזכור את השמות צריך להיות מדויק. "Comic Sans" לא יעבוד, ואילו "Comic Sans MS" (כפי שמופיע במשרד) יהיה.
זכור כי כל הרחבות אלה דורשים סוג זה של דיוק במידע שאתה נותן להם, ואתה תהיה מאובזרת להשתמש בהם במלואם.