נכון שיש דברים בחיים שאתם שואלים את עצמכם איך הסתדרנו בלעדיהם עד היום? לא יודע מה אתכם אבל כשיום אחד טיילתי באיקאה וראיתי כף נעליים ממש ממש גבוהה, כזאת שלא מכריחה אותך להתכופף בשביל לריב עם הרגל, זה אשכרה שינה לי את החיים. כזה. תוספי כרום הם כלי עזר שניתן להתקין דרך החנות על דפדפן הכרום של גוגל ואני לא יודע עד כמה הם ישנו לכם את החיים כמו שכף הנעליים הגבוהה שינתה לי אבל יש לי הרגשה שחלקם בהחלט ישנו לכם את כל חווית העבודה שלכם. אתם כמובן מוזמנים למסע היכרות עם עשרת תוספי הכרום שאני ממליץ עליהם במיוחד ולמרות שסביר להניח שאם אתם בתחום, אתם כבר מכירים כמה, עדיין, יתכן שאני יחדש לכם אחד או שניים. אולי.
ישנם המון תוספי כרום מסוגים וקטגוריות שונות המאפשרים כלים ופעולות כאלו ואחרות אבל בפוסט הזה אני מתמקד באותם תוספי כרום שמקלים, מעשירים ומפתחים את עבודתנו כמעצבי ובוני אתרים. במקרה ולתוסף כרום מסוים, יש אלטרנטיבה שווה במיוחד, אני אציין גם את זה. אז חבל על הדיבורים, בואו נתחיל.
1 – דוגם צבע
ColorPick Eyedropper
תוסף כרום הדוגם צבע מדפדפן האינטרנט. תוכלו לדגום כל צבע מאתרי אינטנרט שונים, צבעי תמונות, צבעי רקע, צבעי אייקונים, צבעי טקסט וצבע של כל וויזואל אחר המופיע על הדפדפן. ברגע שתדגמו את הצבע, הוא יאפשר לכם להעתיק אותו גם בקוד צבע קסדצימלי (קוד צבע HTML) אותו תוכלו להדביק בכל תוכנת אדובי, figma או ישירות באתר האינטרנט שלכם. בנוסף תוכלו להעתיק את ערכי הצבע ב RGB או ב HSL (להעתקת HSL צריך להפעיל את האופציה בהגדרות הכבויה בברירת המחדל).
כך נראית דגימת צבע:
2 – מזהה פונטים אינטרנטיים
WhatFont
ראיתם אתר אינטרנט וממש אהבתם את הפונט? ניסיתם להבין באיזה פונט מדובר ולא הצלחתם? whatfont הוא תוסף המאפשר לכם לגלות את שמו של הפונט המוטמע באתר האינטרנט. שימו לב שהתוסף יכול לגלות פונטים חיים בלבד, מה שאומר שאם הפונט מגיע כתמונה, כמובן שהתוסף שלא יצליח לקרוא את זה.
הנה התוסף המראה את החלונית הקטנה שמגלה באיזה פונט השתמשתי באתר שלי…
אלטרנטיבה לתוסף ה -whatfont – קליק ימני ולחיצה על בדיקה. שם תוכלו לגלות עם כלי ה – Inspect את שם הפונט ועל הדרך עוד כמה סודות מעניינים על האתר…
3 – מקליט מסך
Loom
תוסף כרום המאפשר צילום והקלטת מסך. ההקלטה נשמרת בענן וניתן לשתף אותה עם אחרים בעזרת קישור מיוחד.
אלטרנטיבה לתוסף Loom –
תוכנה נהדרת המאפשרת צילום מסך מהיר: תוכנת Lightshot
תוכנה המאפשרת הקלטת מסך: OBS studio
4 – מציג קווי עזר
Grid Ruler
5 – מצלם עמודי אינטרנט
GoFullPage
דמיינו לרגע מצב בו אתם יכולים להפוך אתר אינטרנט למסמך PDF. נשמע מופקע? אז הנה… go full page הוא תוסף כרום המאפשר צילום של עמודי אינטרנט שלמים, מהחלק העליון של העמוד עד לחלקו התחתון. התוסף מספק את הכלי ליצירת גיבויים ויזואליים לאתרים, צילומי מסך לתיק עבודות ומסירת סקיצות ללקוחות ולהרבה דברים אחרים. בהגדרות התוסף ניתן להחליט על הפורמט בו ניתן לשמור את הצילום (pdf, jpg) וכמו"כ ניתן להגדיר האם הכל יוצג כמסמך אחד או יחולק למספר מסמכים.
6 – בדיקת גדלי מסכים שונים
Window Resizer
כל בונה ומעצב אתרים יודע שאחד האתגרים בבניית האתר הוא ההתאמה שלו לגדלים שונים של מסכים ולסוגים שונים של מכשירים. אתר אינטרנט יכול להיות מוצג במסך גדול, במסך בינוני ואפילו במסכים ממש קטנים של מחשבים ניידים בגודל 13 אינץ' לדוגמה. אם נניח אנחנו עובדים על מסך גדול, איך נדע שהאתר נראה טוב גם במסכים קטנים יותר? אז למען האמת יש כמה דרכים לעשות את זה. הקטנה ידנית של הדפדפן, אתרי אינטרנט מיוחדים שמראים איך אתר מסוים נראה בגדלי מסכים שונים ועוד כהנה וכהנה. תוסף הכרום window resizer מאפשר לנו בדיוק את זה בקלות ובמהירות. נוכל להקטין את המסך שלנו דרך התוסף לפי מידות מדויקות של גדלי מסכים נבחרים, נוכל ליצור גדלים מותאמים משלנו ולהגדיר הגדרות שונות נוספות.
שימו לב לגדלים האפשריים. בהגדרות התוסף, ניתן להוסיף גדלים מותאמים נוספים.
אלטרנטיבה לתוסף window resizer: אתר responsive test
7 – מגלה הפלטפורמות
Wappalyzer
השטינקר האהוב עלינו! אם פעם נתקלתם באתר אינטרנט שהרשים אתכם להפליא, הייתם ממש סקרנים איך בנו אותו אבל לא העזתם לשאול את יוצר האתר, אז הנה התוסף שיספר לנו הכל על כל אתר. תוסף הכרום הזה יגלה לכם איזה תוספים יש בו, איזה התקנים ומה הפלטפורמות בהם השתמש בונה האתר.
8 – כלי לבדיקת בעיות נגישות
WAVE Evaluation Tool
נגישות. המילה שמפחידה המון בוני אתרים ובעלי אתרים. אתר שאינו מונגש בצורה טובה, בעל האתר עלול להתבע בסכומים אסטרונומיים וזה בהחלט מפחיד. אבל…
נגישות היא גם חובה מוסרית של בעלי האתרים כלפי אוכלוסיות בעלי מוגבלויות כאלו ואחרות. להנגיש את האתר שלנו היא הדרך לוודא שכולם יוכלו להשתמש באתר באופן פשוט וקל. בכל הנוגע להנגשת אתרים יש בלבול עצום בקרב בוני אתרים. יש כאלו שרואים בהנגשה משימה בלתי אפשרית (לא נכון) ויש כאלו שחושבים שמספיק להתקין תוסף נגישות ולכתוב הצהרת נגישות ובכך הם מנגישים את האתר ויוצרים הגנה משפטית מפני תביעה. זו לצערי קונספציה מוטעית. תוסף נגישות הוא טוב לאתר שמונגש בצורה טובה מלכתחילה. תוסף נגישות לא "מנגיש" אתר שלא בנוי בצורה מונגשת ולכן גם אתרים שקיים בהם תוסף נגישות כזה או אחר, אינו מוגן מפני תביעה משפטית אם הוא לא בנוי נכון מבחינת הנגשה. אז איך מנגישים אתר? ראשית, כמו כל דבר בחיים, גם את זה צריך ללמוד. אני בהחלט ממליץ על הקורס הנפלא "קורס נגישות אתרים" כדי ללמוד את הנושא אבל הרבה לפני קורס כזה או אחר, התוסף wave הוא התחלה נהדרת לבדוק ולקבל אינדיקציה ראשונית על האתר, האם הוא נגיש או לא. מה שבעיקר מעניין אותנו זה כמות השגיאות וכמות שגיאות הקונטרסטיות שהתוסף מציג. התוסף יראה לכם איפה השגיאות נמצאות וכך תוכלו גם לתקן אותם. האם התוסף הוא המילה האחרונה בנוגע לנגישות האתר? כמובן שלא. יש דברים שהתוסף לא בודק בנוגע לנגישות (כמו לדוגמה לחיצה על מקש ה – tab או מעבר עם חיצי המקלדת) אבל הוא בהחלט אינדיקציה ראשונית למצב הכללי של האתר מבחינת נגישות.
על נגישות האתר שלי עבדתי קשה. והנה התוצאה שהביא wave לאתר:
9 – כלי לבדיקת בעיות נגישות, ביצועי האתר וקידום
Lighthouse
בהמשך לתוסף הקודם, תוסף ה Lighthouse הוא כלי שמאפשר גם כן בדיקת נגישות על ידי קבלת ציון (מעל 95 זה בהחלט עבודה טובה). לעיתים, התוסף מצביע על בעיות נגישות שתוסף ה wave לא הראה אותם וגם הוא נותן טיפים ודרכים לתקן את בעיות הנגישות, מה שהופך אותו ליעיל ביותר. אבל מעבר לכך, הוא מאפשר גם כן אינדיקציות על דברים אחרים כמו ציון של הביצועים – מה שאומר מהירות העלאת האתר או רמת בסיס הקידום של האתר.
10 – כלי להשראה עיצובית
Muzli
מוזלי הוא תוסף כרום נהדר שיתן לכם השראה עיצובית ורעיונות איפיוניים.
חברים יקרים, עד כאן להפעם. מוזמנים לבקר בזירת התוכן וליהנות ועוד המון תכנים נוספים. נתראה בפוסט הבא.
