תוֹכֶן
- 01. מגדלור
- 02. פולימר
- 03. APIs Explorer
- 04. רפרוף
- 05. Google GitHub
- 06. בובה
- 07. ארגז עבודה
- 08. קודלאבס
- 09. כלי צבעוני
- 10. ספרינטים עיצוביים
- 11. אנשים + מדריך מדריך AI
- 12. עוזר גוגל
- 13. תובנות PageSpeed
- 14. AMP בגוגל
- 15. DevTools של גוגל
- 16. עיצוב חומרים
עבודה באינטרנט פירושה בדרך כלל שתעבוד עם Google בצורה או צורה כלשהי. וכיוון ש- Google Chrome מקדים את התחרות, מעצבים ומפתחים צריכים לחשוב כיצד הפרויקט שלהם יעבוד עם הדפדפן. איך זה ייראה? באילו טכנולוגיות הוא תומך, עד כמה הוא מאובטח וכיצד הוא יבצע?
למרבה המזל, Chrome מספק כלים להבטיח שכל אתר או אפליקציה יהיו במיטבם. DevTools מאפשרים למעצבים ולמפתחים לקבל תובנות בדף אינטרנט: אתה יכול לתפעל את ה- DOM, לבדוק CSS, להתנסות בעיצובים בעריכה חיה, לנקות באגים ב- JavaScript ולבדוק ביצועים. (ראה כאן מידע נוסף על אופן השימוש בכלי האינטרנט האלה של Google, ואם אתה מתחיל מאפס, ראה גם את רשימת מובני האתרים המובילים שלנו).
אבל גוגל מציעה יותר מסתם הדפדפן. יש לו כלים ומשאבים שיסייעו כמעט לכל היבט בחיי העיצוב והפיתוח שלך. רוצה לדעת כיצד לשפר ביצועים? מגדלור כאן כדי לעזור. רוצה לבנות אתרים ניידים בעלי ביצועים טובים יותר? ואז תגיד שלום ל- AMP. האם אתה מחפש לבנות PWA יפה? ואז רפרוף, עיצוב חומרים ותיבת עבודה מוכנים להיכנס.
היופי בשימוש בכלים, משאבים, ספריות ומסגרות של גוגל הוא שאתה יודע שהם יעבדו היטב עם דפדפן Chrome - הדפדפן הפופולרי ביותר על פני כדור הארץ. לקבלת כלים נוספים, עיין בסיכום הכלים שלנו לעיצוב אתרים.
01. מגדלור
ביצועים הם גורם מפתח בהצלחתו של אתר ו- Lighthouse הוא הכלי של גוגל לשיפור איכות דפי האינטרנט (שירות אירוח אתרים נכון יעזור גם הוא). אז איך משתמשים במגדלור ומה הוא יכול לעשות? בצורה הפשוטה ביותר שלה, אתה יכול להפעיל את מגדלור מהכרטיסייה ביקורת ולבחור מתוך מבחר אפשרויות כולל שולחן עבודה או נייד, בנוסף לתיבות סימון לביצועים, נגישות וקידום אתרים, כדי ליצור דוח סופי עם הצעות שיפורים.
02. פולימר
פולימר ידוע בעבודתו עם רכיבי רשת, אך הפרויקט הרחיב כעת את הרפרטואר שלו לאמץ אוסף של ספריות, כלים ותקנים. מה נכלל? LitElement הוא עורך שמקל על הגדרת רכיבי האינטרנט, ואילו lit-html היא ספריית תבניות HTML המאפשרת למשתמשים לכתוב תבניות HTML מהדור הבא ב- JS. בנוסף, תוכלו למצוא גם ערכת Starter PWA, ספריית הפולימר המקורית וסטים של רכיבי רשת.
03. APIs Explorer
לגוגל יש ספרייה עצומה של ממשקי API הזמינים למפתחים, אך מציאת מה שאתה זקוק לו אינה משימה קלה. זה המקום שבו ממשקי ה- API של גוגל נכנסים להושיט יד עוזרת. יש רשימה ארוכה שניתן לגלול בה, אך, לגישה מהירה יותר, יש תיבת חיפוש לסינון רשימת ה- API. כל ערך מקשר לדף עזר עם פרטים נוספים על השימוש בממשק ה- API.
04. רפרוף
אם אתה מעוניין לבנות יישומים נאים למובייל, אינטרנט ושולחן עבודה מבסיס קוד יחיד, אז פלאטר יכול להיות בשבילך. האתר מהווה התייחסות מלאה לעבודה עם פלטר ובנייתו. אין לך מושג מה לעשות? המסמכים לוקחים משתמש מההתקנה ליצירה, בסיוע בהרבה דוגמאות והדרכות.
05. Google GitHub
כפי שרובם יידעו, GitHub היא פלטפורמת האחסון / מאגר לאחסון ושיתוף קוד וקבצים. ולמרבה השמחה לגוגל יש מקום משלה בפלטפורמה עם מעל 260 מאגרים לנפות. השתמש במסנן כדי לצמצם את זמן החיפוש שלך ולהתקרב למאגר שאיתו אתה רוצה לשחק או לתרום.
06. בובה
מובנה בצומת, Puppeteer מציע ממשק API ברמה גבוהה המאפשר לך לגשת ל- Chrome ללא ראש - למעשה Chrome ללא ממשק המשתמש, אשר מפתחים יכולים לשלוט עליו באמצעות שורת הפקודה. אז מה אתה יכול לעשות עם בובה? כמה אפשרויות זמינות ליצירת צילומי מסך וקבצי PDF של עמודים, אוטומציה של הגשת טפסים ויצירת סביבת בדיקות אוטומטית.
07. ארגז עבודה
אם אתם מחפשים לבנות PWA אז זו נקודת התחלה מצוינת. Workbox מספק אוסף של ספריות JavaScript להוספת תמיכה לא מקוונת לאפליקציות אינטרנט. מבחר מדריכים מעמיקים מדגימים כיצד ליצור ולרשום קובץ עובד עובד, לבקש מסלול, להשתמש בתוספים ולהשתמש באגדלים עם Workbox. ויש גם סט של אסטרטגיות מטמון למשל.
08. קודלאבס
זקוק להדרכה מעשית למוצר של גוגל? Codelabs מספק "חוויית קידוד מודרכת, הדרכה, מעשית". האתר מחולק בקפידה לקטגוריות ואירועים, מה שמקל על קל למצוא את מבוקשך. הוא כולל אנליטיקס, אנדרואיד, עוזר, מציאות רבודה, רפרוף, G Suite, חיפוש, TensorFlow ומציאות מדומה. בחר אפשרות וקבל את הקוד ואת ההוראות שאתה צריך כדי לבנות יישומים קטנים.
09. כלי צבעוני
כלי הצבע הוא כלי פשוט המאפשר לך ליצור, לשתף ולהחיל פלטה בנוסף לבדיקת הנגישות. משתמשים יכולים לבחור לוח מוגדר מראש מתוך לוח החומרים. כל שעליך לעשות הוא לבחור צבע ואז להחיל אותו על ערכת הצבעים הראשית, לעבור לאפשרות המשנית ולבחור שוב. לבסוף, בחר צבעי טקסט עבור שתי התוכניות. לחלופין, עבור אל 'מותאם אישית' כדי לבחור את הצבעים שלך. ואז לעבור לנגישות כדי לבדוק שהכל טוב לפני, סוף סוף, ייצוא של הצבעים.
10. ספרינטים עיצוביים
ערכת ספרינט העיצוב מיועדת למי שלומד כיצד להשתתף או להריץ ספרינטים עיצוביים. נראה שזה מכסה את כל בסיסי הידע, החל ממתחילים לראשונה ועד למנחי ספרינטים מנוסים. למדו על המתודולוגיה או קפצו היישר לשלב התכנון, כולל כתיבת תקצירים, איסוף נתונים ומחקר, כמו גם מה לעשות לאחר ספרינט. כולל גם שורה של משאבים כגון כלים, תבניות, מתכונים ואפשרות להגיש שיטה משלך. כמו כן, סביר להניח שתצטרך איפשהו כדי לאחסן ולשתף משאבים כדי לוודא שבחירת אחסון הענן שלך היא במקום.
11. אנשים + מדריך מדריך AI
מדריך זה הוא עבודת יוזמת המחקר People + AI ב- Google ונראה להציע עזרה למי שרוצה לבנות מוצרי AI הממוקדים על ידי האדם. ספר ההדרכה המקיף מחולק לשישה פרקים המכסים את צרכי המשתמשים, איסוף והערכת נתונים, מודלים נפשיים, אמון, משוב וכישלון חינני. כל פרק מלווה בתרגילים, דפי עבודה והכלים והמשאבים הדרושים בכדי לגרום לזה לקרות.
12. עוזר גוגל
זוהי פלטפורמת המפתחים של Google Assistant, המציעה מדריך כיצד לשלב את התוכן והשירותים שלך עם Google Assistant. זה מראה לך כיצד להרחיב את האפליקציה שלך לנייד, להציג תוכן בדרכים עשירות עבור חיפוש ועוזר, אורות שליטה, מכונות קפה ומכשירים אחרים ברחבי הבית ובניית חוויות קוליות וחזותיות לרמקולים, צגים וטלפונים חכמים.
13. תובנות PageSpeed
PageSpeed Insights מנתח תוכן אינטרנט ואז מציע הצעות כיצד לגרום לו לטעון מהר יותר. כל שעליך לעשות הוא להוסיף כתובת אתר, ללחוץ על כפתור הניתוח ולחכות שהקסם יתרחש. עיין ב- Docs כדי לקבל תובנה טובה יותר לגבי פעולת ה- API של PageSpeed וכיצד להתחיל להשתמש בו.
14. AMP בגוגל
AMP הוא הכלי של גוגל ליצירת דפים ניידים עם טעינה מהירה שיגיעו (בתקווה) לראש דירוג החיפוש. למד כיצד ליצור אתרים מהירים ומשתמשים ראשונים, לשלב AMP במוצרי Google, להשתמש במטמון AMP של Google כדי להפוך את דפי AMP למהירים יותר ולייצר רווחים מדפי AMP עם מוצרי Google אחרים.
15. DevTools של גוגל
כל מעצב ומפתח יודע (או לפחות צריך לדעת) ש- Chrome מגיע עם סט כלים המובנה ישירות בדפדפן. DevTools של Chrome הם אידיאליים לבדיקת האלמנטים המרכיבים דף, בדיקת CSS, עריכת דפים בזמן אמת ועוד.
הכרטיסייה אלמנטים היא ההקדמה ל- DevTools. הוא מציג את קוד ה- HTML המרכיב את הדף שנבחר. קבל תובנה לגבי המאפיינים של כל div או תג מהדף שנבחר והתחל בעריכה חיה. זה מושלם להתנסות בעיצובים. בדוק את הפריסה - בין אם אתה משתמש ב- Flexbox או Grid - והסתכל בגופנים קשורים עם דוגמאות ובחן אנימציות.
במקום אחר, תוכל להציג ולשנות CSS. הכרטיסייה 'סגנונות' בחלונית 'אלמנטים' מפרטת את כללי ה- CSS החלים על האלמנט שנבחר כעת בעץ DOM. הפעל וכבה את המאפיינים (או הוסף ערכים חדשים) כדי להתנסות בעיצובים. זהו הכלי המושלם להבטיח שהכל יעבוד כצפוי לפני החלת כל שינוי בעיצוב החי.
באפשרותך גם לבצע ניפוי באגים ב- JavaScript, לייעל את מהירות האתר ולבדוק את מהירות הרשת. הנה טיפ מהיר שבו תוכלו להשתמש כדי לזרז באופן מיידי את זרימת העבודה שלכם. עבור לכרטיסייה מקורות, לחץ על קטע חדש והוסף קוד בשימוש תכוף. תן שם לקטע הקוד ושמור. חזור על פי הצורך. עכשיו אתה יכול לתפוס את קטע הקוד הזה במקום לכתוב אותו שוב.
כמו כל דפדפן טוב, Chrome מתפתח כל הזמן וכל מהדורה חדשה מביאה תכונות חדשות. גלה מה קורה בפלטפורמת הסטטוס של Chrome
16. עיצוב חומרים
התפתחות עשויה להיראות כילד המועדף על ידי גוגל, אך לא משנה מה אתה מייצר, יוצר או בונה, הוא צריך להיראות טוב ולהעניק למשתמש חוויה שגורמת לו לרצות להשתמש בו. החומר הוא תוספת עדכנית יותר לאורווה של גוגל, אך היא מערכת עיצוב שהבשילה לכדי ערכת עיצוב חיונית.
כמו כל מערכת עיצוב טובה, יש לה סט קווים מנחים משלה, שעליך לבדוק לפני שנכנסים לדברים המרתקים יותר. קבל סקירה כללית של אופן השימוש באלמנטים שונים, מהו נושא חומר, כיצד ליישם נושא ומדריכי שימושיות כולל נגישות. במקום אחר ישנה תובנה לגבי חומר היסוד, הכולל את תחומי המפתח של העיצוב כגון פריסה, ניווט, צבע, טיפוגרפיה, סאונד, איקונוגרפיה, תנועה ואינטראקציה. כל קטגוריה חושפת את מה שאסור לעשות ואל תעשה והיכן כדאי לשקול זהירות. כדי לתת מושג למה לצפות, קטגוריית הפריסה מציעה חלקים על הבנת פריסה, צפיפות פיקסלים, כיצד לעבוד עם פריסה רספונסיבית הכוללת עמודות, מרזבים ושוליים, נקודות מעבר, אזורי ממשק משתמש ושיטות ריווח, אך רק כמה מהם.
מעבר לסעיף העיצוב נמצא רכיבים, המספקים את אבני הבניין הפיזיות הדרושות ליצירת עיצוב. מה כלול כאן? כפתורים, כרזות, כרטיסים, דיאלוגים, מחיצות, רשימות, תפריטים, מחווני התקדמות, סליידרים, סורגים (אלה הודעות קצרות על תהליכי אפליקציות בתחתית המסך), כרטיסיות, שדות טקסט וטיפים. ללא ספק אוסף מקיף של רכיבים.
ומפתחים לא נשכחו, עם פרטים והדרכות כיצד לבנות לפלטפורמות שונות - אנדרואיד, iOS, אינטרנט ורפרוף. ולבסוף, ישנו דף המוקדש לשלל משאבים שיעזרו לכם לקרות את העיצוב שבחרתם.
מאמר זה הופיע במקור במגזין נט. קנה גליון 326.
