חזיתי פיתוח טיפים לחיות על ידי.
להלן מאמר שקראתי בבלוג לגבי חזיתיים מפתחים שיטות קידוד וחשבתי להעביר את זה הלאה. זה על ידי דאג Neiner, עורכת Coding הדלק שלך הוא נשיא Studio פיקסל עיצוב גרפי . הוא מכור הטכנולוגיה החדשה, ובמיוחד אוהבת לבלות זמן עם וורדפרס, Ruby on Rails ו jQuery.
להלן כאן הוא סדרה של 10 דברים שיש לזכור ולתרגל על כל פרויקט בניית אתרים. אני רשום אותם כאן על פי סדר החשיבות רבים המדרגות לבנות על זה. אם אתה לוקח שום דבר אחר מן הקריאה, נא לקחת כללי # 1 ו # 2 ללב ולתרגל אותם. אני חושב לפתור את שתי הבעיות יוביל עיצוב טוב וביצוע טוב יותר אתרים באינטרנט.
1. טען די, ועוד קצת
במיוחד בזמנים כלכליים קשים, עסקים ואנשים פרטיים כאחד מנסים לקצץ בעלויות ולשמור על פרויקטים עד למינימום. בשל הידע הזה, אנחנו גם מפתחי אינטרנט מנסה לעבור כל שלב במהירות האפשרית. פיתוח החלק הקדמי, לעומת זאת, לקחת כמות משמעותית של זמן אם נעשה כראוי. לא במידה מספקת לחייב בפעם שמוביל אותנו מפתחי לדלג על דברים שאנחנו יודעים חשובים רק כדי לשמור על הפרויקט במסגרת התקציב. הכלל הוא פשוט ... בדרך כלל אתה לא לקחת את הזמן כדי לעשות את זה נכון, אם אין לך את הזמן כדי לקחת. הדרך היחידה להשיג יותר "זמן" כמפתח, היא להבטיח את הזמן שאנחנו כן מבלים מפוצה כמו שצריך. בשלב זה לבד הלב והראש ניתן באופן מלא מחובר הפרויקטים שלנו ... ורק אז נוכל לקחת את הזמן כדי לבצע את שאר הכללים 9.
2. לחנך מעצב
למי מעצב / מפתח All-in-1 מכונה, זה צריך להיות קל. עם זאת, coders שעובדים עם או מעצב יש אחריות מיוחדת במינה. כמו מעצבים רבים באים מרקע הדפסה, זה תלוי בך, מפתחים, לחנך אותם על האפשרויות העומדות העיצובים שלהם. לא ... לא אמרתי להודיע להם על 150 + שימוש jQuery plugins אתה משתמש, או מחשבות שלך על שימוש משולבת UL / LI לעומת סדרה של כמה תגיות. אמרתי להם לחנך את האפשרויות. לעזור להם להבין כיצד העיצוב שלהם עשוי להציג בהתקנים שונים. לעזור להם להבין כיצד למנף רקע חוזרות ודפוסי רעפים להשיג עיצובים גדולים עם גודל קובץ מינימלי.
אל תשאירו את היצירתיות אך ורק מעצב או! זו ההזדמנות שלך להוכיח שאתה יצירתי כמו גם על ידי מציאת פתרונות טכנולוגיים מושלמת כדי לענות על הצרכים של המעצב. אומר להם "זה פשוט לא נעשה כך" עבור כל בקשה היא הדרך הבטוחה לגרום לתסכול של שני הצדדים. שים את דעתך לעבוד במציאת דרכים לעקוף את המכשולים.
הערה: כללי 3 עד 10 לבנות את אלה הראשונים שני כללים. חלק מן הכללים הבאים מחייבים גרפיקה נוספים מהמעצב, וכל הכללים לוקח זמן לעקוב. להתחייב לכללים 1 ו -2, ואת הכללים הנותרים יהיה גם הגיוני להפוך את המוצר המוגמר הרבה יותר טוב.
3. חושב בשכבות, לא ב Slices
גם היום, אנחנו עדיין משתמשים בביטוי "לחתוך את העיצוב" כדי לתאר את התהליך של מעבר העיצוב מ Illustrator או Photoshop לתוך פריסת HTML / CSS המוגמר. אמנם זה עדיין מדויק במידה רבה, את שמה מפריך את הרעיון לשעבר חיתוך עיצוב לחתיכות וההרכבה את זה (בדרך כלל בטבלה) שוב על דף ה-HTML.
זה היה ברשת הישנה. האינטרנט החדש משתמש המושג שכבות, לערום ו-Z-index כדי להשיג עיצובים עם עומק. כמו המתכנת, כדי להיות בטוח לקבל קבצי PSD שכבות שכבות או קבצים בינה מלאכותית מהמעצב לעומת עיצוב הדירה. זה יאפשר לך יש גמישות רבה יותר איך להרכיב אתר אינטרנט. זכרו, כאשר עובדים בשכבות, חשוב על רכיבי HTML, כי הם חיוניים למבנה לפני להזדקק הוספת אלמנטים div נוספים ומרווחי. ניתן להשתמש בתבנית האנכי חוזר על html יסוד, ועל רקע האופקי חוזר על body מרכיב בלי להביא חשש div#wrapper כדי לפתור מצוקות הרקע שלך.
4. השתמש בתבנית התמונה הטובה ביותר
מה זה "פורמט התמונה הטובה ביותר" אתם שואלים? זה אחד כי הוא המתאים ביותר למשימה. PNG, GIF ו קבצי JPEG לכולם יש יתרונות שונים. כאשר יש שקיפות לא בתמונה, לבדוק איזה גודל / איכות התמונה היא הטובה ביותר בין קובץ PNG, GIF ו-JPEG. עבור תמונות גדולות, JPEG תהיה כמעט תמיד לנצח עבור גודל לעומת איכות. עבור תמונות קטנות ללא שקיפות, ראה שיש לו גודל יותר טוב קובץ PNG או GIF. אם תחליט על GIF, הקפד לשחק עם האפשרויות והמולת והאפשרויות lossy (האם אתה בכלל יודע פוטושופ יש אפשרות "lossy" עבור GIF?). לעיתים קרובות אתה יכול ללחוץ גם קבצים קטנים יותר מתוך Photoshop באמצעות התאמת הגדרות פלט עוד יותר.
עבור תמונות, כי צריך להיות שקיפות, לקבל החלטות משכילות על איך הם ישמשו. אם הם יהיו מונחים על פני רקע מורכב, ייתכן שתצטרך לשקול שימוש PNG. אם הרקע הוא עקבי מספיק מט צבע GIF לא עומדים היטב, לראות אם קובץ GIF קטן. GIF יש את היתרון של אין צורך בתכנות נוסף כדי לגרום לזה לעבוד ב IE6.
לגבי השימוש JPEG: אם אתה משתמש JPEG כחלק ממשק המשתמש שלך (ולא רק כדי להציג תמונה, וכו ') הקפד להשאיר את את פרופילי ICC בעת שמירה על אינטרנט. דפדפנים מסוימים תכבד את הפרופיל לייצר הבדל בין צבע GIF / PNG ו קבצי JPEG של אותו צבע. מדובר בבעיה פשוטה, כדי למנוע רק על ידי כיבוי של פרופילי ICC.
מה אם זה המצב, לאבד להפסיד? היו זמנים שבהם אני צריך שקיפות מלאה של PNG עם מורכבות התמונה מתאים יותר JPEG. במקרים כאלה אני בדרך כלל מחסנית (זוכרים, חושב בשכבות) שתי תמונות: PNG לשקיפות, ו GIF על היבט תמונה מורכבת. זהו פתרון הבעיות היצירתי כזה שיבטיח את הדפים לטעון מהר, כי העיצוב שומר על שלמותה.
5. לדעת מתי להשתמש כיתות לעומת מזהי
אני חשבתי שזה רק השכל הישר, אבל כנראה זה לא כפי שאני רואה coders רבים באמצעות שמות שיעור שבו הם צריכים להשתמש התעודות. זה אולי לא נראה כמו בעיה גדולה, אך בסופו של דבר כאשר אתה מנסה למקד את הרכיב באמצעות Javascript.
הרעיון הוא פשוט, אם יהיה רק מרכיב אחד בדף נתון, השתמש מזהה. אם יהיו מספר מופעים בעמוד מסוים, להשתמש בשמות בכיתה. בכל פעם אלמנט אחד-of-a-סוג, השתמש מזהה. שלה כל כך פשוט! דברים כמו ul.navigation על סרגל הניווט הראשי או div.site-logo אין שום משמעות. כל האלמנטים האלה הם ברורים צריך ומזהה.
במקום להוסיף עוד חוק לרשימה שלנו, תנו לי גוש משהו אחר כאן: אין להשתמש שיעורים רבים מדי! קח את הקוד הבא לדוגמא קיצונית (שימו לב כיתות להופיע שש פעמים):
למי קוד לעתים קרובות, אתה מבין את זה הוא דוגמה מגוחכת, אבל זה מראה את הטעות של יתר באמצעות שיעורים. השתמש רק את מה שאתה צריך כדי לשפר את הסגנון בצורה נכונה (דרך Javascript) HTML, לא יותר.
6. להפוך את דפי שלך מגיב
חשוב שלה שהדף מגיב בצורה נכונה כמו משתמש הקצה מנווט אותו. שימוש באמנות כמו תופעות הגלגול התמונה, כמו גם: hover,: פעיל: מדינות להתמקד לא יכול להדגיש מספיק. אתה לא רוצה לתקוף את המשתמש עם אינטראקציות או סגנונות רבים מדי, אבל רוב האנשים מגיבים היטב משוב חזותי. הנה אחד קל בשבילך: קישורים צריך לשנות את המדינה כאשר מרחפת העכבר עליהם ... נקודה! זה לא מספיק, כי הדפדפן מציג את ידו הקטנה שמעיד על קישור. אני לא יכול להגיד לך כמה מתסכל זה לחפש דרך דף עם טקסט שחור מחפש את הקישורים אפור כהה מקווה ומתפלל כי היד מופיע לידיעתי מצאתי אחת!
שימוש במוסכמות כגון "אתה נמצא כאן" אינדיקטורים או תיאוריים כלי עבודה עצות כולם נופלים תחת קטגוריה זו. האינטראקציה יותר משוב שמופיע למשתמש בזמן שהם לנווט באתר, כן ייטב.
7. תמיד השתמש Sprites CSS עבור rollovers
אם אתה לא יודע מה Sprites CSS הן, בדוק את המאמר הזה ב למחוץ מגזין זה או אחד בכל רשימת פרט לקבלת פרטים. למי יודע מה הם, למה אתה לא משתמש בהם!? אם תאמר לי חוסר זמן בגלל שלה, אני רוצה להפנות אותך כלל מס '1 ברשימה זו. בעבר טענה הזמן, אני באמת לא יכול לחשוב על תועלת חשובה יותר מאשר שימוש Sprites CSS עבור rollovers התמונה. בדוק את הנושא של jQuery באתר. כמעט כל ממשק המשתמש החלקים בנויים באמצעות קובץ יחיד PNG (בתמונה למטה). נטען ממשק בבת אחת, וכל לרחף / פעיל מדינות זמינים באופן מיידי. אין עיכוב על: image לרחף לטעון, בקשה אחת לשרת, לא 10 +. זה כלי פנטסטי הקצה הקדמי קידוד Toolkbox כי מפתחים צריכים להשתמש בתדירות גבוהה יותר.
8. להבין את ההבדל בין Flash ו-JavaScript
אני חושב Javascript יכול לעשות דברים מדהימים. אני גם אוהב לדחוף את הגבולות של מה הוא יכול לעשות. אני אוהב לעשות יישומונים ותוספות בדיוק כמו כל אחד אחר ... אבל Javascript לא יכול לפתור את כל הבעיות בפיתוח האינטרנט הדינמי. במקום לבזבז 10 שעות חיקוי תכונה Flash שתיקח 1 שעה לעשות ב-Flash, לעשות את הבחירה הנכונה ולבחור פלאש. מצד שני, אם אתה רק צריך מסובבי תמונה ... לא תעז לפתוח פלאש!
9. לבדוק את האתר שלך בדפדפנים רבים (כולל IE6)
1 זה לוקח זמן, אין ספק בכך. אני מפתח על מקינטוש, ויש לי מחשב (וגם מספר רב של סביבות-Virtual PC), אשר מאפשרות לי הבדיקה היא שרוב האנשים דפדפנים רגילים משתמשים כיום. אלא אם יש לך דוחות Google Analytics שאומרים שאף אחד לא משתמש IE או כל אחד משתמש פיירפוקס, לא עושים הנחה על איך אנשים לגלוש באתר שלך. אני לא אומר את האתרים נראים זהים, אבל לגרום להם לעבוד, לתפקד, וגם נראה טוב (וזה בהחלט דומה!) ברוב הדפדפנים.
הערה: אני מזכיר IE6 באופן ספציפי כי הלקוח הגדול ביותר שלי הוא תאגיד שעדיין משתמש IE6. פיתחתי סגנון קידוד זה מאפשר לי לבנות במהירות של הדפדפנים המודרניים, וליישם רק גליון סגנונות מעטים תיקונים של Javascript כך האתר נראה ממש IE6. אני בטוח לאבד חלק הקצה על ידי עושה את זה ככה, אבל זה חוסך ממני רגעים מביכים רבים.
10. תמיד לשמור על תחזוקה ב Mind
כאשר אתה "חותך" עיצוב בפוטושופ, או להכין CSS שלך Javascript, לשמור על תחזוקה בראש. חלק גרזן מטורף מגניב CSS אתה משתמש היום, עשוי לחזור לרדוף אותך מאוחר יותר. הטלת כללי CSS בכל מקום שאתה רוצה בקובץ CSS אולי נראה מהיר ברגע (Guilty!), אבל יעשה שינוי ועדכון בהם מאוחר יותר סיוט.
צעד חשוב לזכור מתרחשת לאחר שיש לך הכין קובץ של המעצב לייצוא מ Photoshop או Illustrator: זכור לשמור גירסה של הקובץ לפני הייצוא. ככה אם אתה צריך לייצא מחדש את זה מאוחר יותר, להוסיף עוד כפתור, לשנות את שורת טקסט, וכו ', תוכל לייצא את זה שוב במהירות. Photoshop בדרך כלל חוסך פורמט תמונה אפשרויות, הגדרות דחיסה, וצבעים מט לעשות את העבודה שלך אפילו יותר קל.
מסקנה
ישנם מספר דברים אחרים שחשובים coders חזיתי שכדאי לזכור, אבל אני חושב שאלה הם חלק חשוב ביותר. רבים ניתן לטעון כי לא מדובר כללים, אבל אני מאתגר אותך לחשוב עליהם ככאלה. אולי יהיה פחות סיכוי לשבור להם את האינטרסים של זמן או כסף על הפרויקט הבא שלך.
