הבעת IT

Re-אופניים הוא Buzzword ובפיתוח אינטרנט זה אומר לא שונה. זה חוסך אנרגיה, במונחים של מאמץ!

במהלך שנות כתיבת CSS ו-HTML ליצירת עיצובים, עקבתי מספר פעולות מומלצות, במרדף אחר חוסכת זמן ואנרגיה במה שאנחנו טווח בכינויו "גלגל מחדש להמציא". פעם אחר פעם, אמרתי לעצמי, שאני חייבת ליצור תבניות מספר, חלק ב-CSS בתקן מחדש שמיש כי אני אשתמש מחוץ לקופסה בעבודה העתיד שלי. אם כי לא לגמרי, אבל הצלחתי להשיג כמה מטרות.

בקידום, שימוש חוזר של CSS, היה לי מבט על כמה מסגרות-CSS הזמינים בדרך כלל לנו והחליט לשים להם להשתמש, כפי שהן בדוקות ויצר על ידי מפתחים מנוסים הרבה יותר מאשר את עצמי. יתרה מכך "להימנע להמציא מחדש".

אם כי ידוע על חיילים משוחררים, ניסיתי בעט כמה מושגי מפתח / שיטות עבודה מומלצות / מחשבות כי הושקעה ביצירת מסגרות, לעשות RE-CSS של רכיבה אפשרי. מקווה שזה יעזור כמה מפתחים-CSS אשר כבר עומד ולאחרונה עלו על העגלה CSS!

מפתחות מחדש אופניים של CSS:

השתמש מוסכמות למתן שמות

זה חייב להיות הגורם החשוב ביותר בקבלת CSS / HTML מחדש שמיש. מתן שמות עקבית רכיבי הדף מאפשר שימוש חוזר של רכיבי דף וסגנונות שלהם עם מעט או שינויים. בקנה אחד עם טענה זו, גם HTML5, בשינוי שינוי גדול על קודמותיה, היא להציג כמה דהינו תגיות מבנית. <article>, <section>, <header>, <aside>, ו <nav> [ מה HTML5 יביא? ]. גם ב-HTML 4 (או נמוך יותר), מומלץ לקרוא חלקים סטנדרטיים של הדף שלך consistanly כמו בדוגמה פשוטה מתחת ...

זכרו, רוב דפי הפרוייקט שלך, בסופו של דבר שיש אלמנטים מרכזיים אותם מבניים. זהה את הדפים האלה אלמנטים משותפים הליבה ....

  <div id="container">
    <div id="header"> ... </ p>
    <div id="nav"> ... </ p>
    <div id="sidebar"> ... </ p>
    <div id="footer"> ... </ p>
   </ P> 

איפוס סגנונות ברירת מחדל (CSS מאפס): בין אם אתה משתמש במסגרת או לכתוב בעצמך, עליך לספק CSS מאפס [ מה CSS מאפס? ], כפי שהם להפחית או לחסל לפעמים חוסר עקביות חזותיים המתרחשות בין דפדפנים שונים. במילים פשוטות מנגנון איפוס CSS מגדיר את הסגנונות של אלמנט HTML ערכי אפס או ריק, ובכך מבטל את כל ערכי ברירת המחדל של הדפדפן הם תנוחות. זה מספק שולחן נקי להגדיר את המאפיינים של חלל אלמנטים אלה של כל User-agent ברירות מחדל [ CSS2.1 סוכן המשתמש סגנון ברירת מחדל גיליון ]. כל המסגרות-CSS צריך מנגנון האיפוס. אם אתה כותב את עצמו CSS מאפס, מילת אזהרה היא שאם יקרה לך לשכוח לאפס נכס מפתח, זה יכול להוביל לדפדפנים נושאים, שקשה מאוד לאתר באגים. זכור, שמור עותק של סגנונות לאפס ולשחרר אותם כל פרויקט חדש שאתה יוצר.

  הגוף, div, dl, dt, dd, ul, ol, לי,
  H1, H2, H3, H4, H5, H6,
  מראש, טופס, fieldset, קלט, בחר, Textarea,
  עמ ', blockquote, שולחן, ה, TD
  {
    גבול: 0px;
    שולי: 0;
    padding: 0;
  } 

ברירות מחדל הגדר סגנונות (בסיסית) לגורמי:

לאחר שהגדרת (אפס או ריק) את ערכי ברירת המחדל של תכונות מסוימות של רכיבי HTML מסוימים, יש צורך ליישם כמה סגנונות על פני כל מופע של רכיבים אלה. אלה הגדרת ברירת המחדל יכול להשתנות על פי העיצוב או על פי שיטות העבודה המומלצות שאתה עוקב אחריהם.

רוב מסגרות CSS, תמיד מציג כמה ברירות מחדל חדשים, נוסף על איפוס דפדפן ברירת המחדל של סגנונות.
ברירות המחדל האלה הבטלות של User-agent ברירות מחדל (גנבו משם על ידי איפוס ה-CSS), אלה יהיו עקביים בין דפדפנים.

זכרו, סגנונות קו בסיס משמשים להגדיר סגנונות הולכים לשמש העיצוב כולו. למשל.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 חזק, H1, H2, H3, H4, H5, H6 {font-weight: bold;} 

סגנונות מופשטים עבור רכיבי ה-HTML נפוצות וכיתות נפוצות:

הפרויקט המורכב ביותר על פני כמה עמודים יהיו רכיבי HTML הנפוצות על פני האתר, לסוג כלשהו של טפסים, כגון התראות ושגיאות, חלונות קופצים מותאמים אישית, תיבות אור וכו 'מאז רכיבים אלה משמשים מחדש על פני פרויקטים, זה יהיה שימושי כדי לספק קבוצה של כיתות הקשורים סגנונות מוגדרים מראש עבור רכיבים אלה, אתה יכול לחסוך לעצמך הרבה זמן.

מלבד הגדרת לשימוש חוזר הגדרות סגנונות עבור רכיבי ה-HTML משותפים, אנו מופשטים כיתות סגנונות יכול הקשורים לצבע הטיפוגרפיה, או אפילו פריסה. אני עצמי נוטה אתה משתמש ... כיתות נפוצות כמו Clearfix, Font08, FontGrey, AlignL, DisplayB וכו '

  קלט בצורה {גבול: 0px; הרקע: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; גובה: 26px; color: # 000000; קו גובה: 30px; font-size: 1.1em;}
 טופס Textarea {גבול: 0px; הרקע: # FFFFFF; color: # 000000; font-size: .9 אותם, גובה קו: 1.5em; גלישה: גלוי;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {ברור: הן;}
 . {מפריד הגבול העליון: 1px solid # 647B06, הגבול התחתון: מוצק 1px # 9CC00A גובה: 0px;}
 . Displayb {תצוגה: לחסום;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: מרכז}
 . Floatr {float: right;}. Floatl {float: שמאל;} 

תיקונים המוזרויות הדפדפן נפוצות

דפדפנים שונים ליישם קוד CSS ולספק רמה שונה של תמיכה במפרט CSS. התוצאה של זה .... "הדפדפן Quirks", שאנו מפתחים שנשארו להתמודד. במיוחד, IE6 רודף coders-CSS ביותר עם מועד לפגישה. החדשות הטובות הן ניסיון הביא יחד תיקונים אפשריים לשימוש חוזר לנושאים האלה (שמכונה לעתים קרובות כמו CSS Hacks ).

זכור, זכור את פריצות / תיקונים שימושי

  / * זום הבאות: 1 הכלל הוא במיוחד עבור IE6 + IE7.  * /
    * HTML. Clearfix,
    *:. ילד ראשון + HTML clearfix {
           זום: 1;
      } 

שמור על שיפור ה-CSS שלך

• הרגל של רכיבה על אופניים מחדש לא בא אליך היום. זה חייב להתפתח. אז לתכנן מחדש של רכיבת אופניים. זכרו זאת, כי אתה יכול המחדל של סגנונות מופשטים, הגדרות טיפוגרפיה, פריסות, סגנונות אלמנט HTML וכו 'נסו לחשוב קדימה.
• גם להביט אחורה על פרויקטים קודמים שלך, זה יעזור לזהות סגנונות אתם נוטים להשתמש לעתים קרובות על פני porjects. תקציר זה.
• הסר את כל סגנונות שאינם בשימוש. נוהג זה ימשיך במסגרת CSS שלך סימפטום משותף בשם "נפיחות" -
• הסר סגנונות החוזרות על עצמן.
• לבנות קבוצה של סגנונות כי הם גמישים מספיק לנמל אותו על פני פרויקטים.

חפש ב-CSS מסגרות

בסופו של דבר. אם אתה השראה מתכוון להשתמש באחת או יותר מהמסגרות CSS, חרס היא רשימה מהירה של כמה אלה הפופולריים כמה ....

• 960 מערכת רשת : מערכת 960 גריד הוא מאמץ כדי לייעל את זרימת העבודה פיתוח באינטרנט על ידי מתן מידות נפוצות, בהתבסס על רוחב של 960 פיקסלים. קיימות שלוש גרסאות: 12, 16 ו -24 עמודים, אשר ניתן להשתמש בהם בנפרד או במקביל. לא חשבתי שאתה לא יכול ליצור דף כזה משלך די בקלות, במסגרת מספק תבניות רשת להדפסה בפורמט PDF, שניתן להשתמש בו כדי לשרטט designs.Bet הדף שלך, זה יעשה רושם מקצועי, אם אתה נושא כמה דפים כאשר אתה עובר ללקוח למפגש דרישות ממשק המשתמש. הוא גם מספק תבניות רשת בסיסיים תוכנות עיצוב פופולרי כמו זיקוקים, Flash, InDesign, Illustrator, Photoshop, Visio וכו 'מתן "המתנע של 10" כדי להתחיל לעבוד העיצוב שלך.
• תכנית : תכנית אב מספקת המסווגים בבירור קבצי CSS עבור מאפס, רשתות, טפסים, הדפסה, טיפוגרפיה, כפתורים, תוספים עבור כרטיסיות שדונים וכו 'הוא גם מספק תמיכה עבור IE בתור נפרד כוללים.
• SenCSs : שלא כמו 2 לעיל, SenCSs (Sense בולט), אין הגדרות CSS עבור פריסה. זה כולל גופנים, paddings, שוליים, טבלאות, רשימות, כותרות blockquotes, טפסים ועוד.
• BlueTrip : הטענה המקורית שלו לתהילה היה זה, זה היה שילוב של התכונות הטובות ביותר שמספקת מסגרות אחרים אחרים כמו כחול, טיול הדפסה Oli ... מהמקום שבו היא מקבלת את שמה. ערכת תכונות של החברה כולל 24 עמודות הרשת, סגנונות טיפוגרפיה, סגנונות ORM, הדפסה, כפתורים וכו '
• Yui רשתות : הביא לך רשת המפתחים של Yahooo, תומך נוזל רוחב (100%) פריסות, כמו גם מראש ברוחב קבוע פריסות ב 750px, 950px, 974px ו, ויכולת אישית בקלות לכל מספר. כפי שניתן לראות, מבחינה טכנית שלה רק את הפריסה של רכיבי. Yui גם סיפק HTML / CSS סטים של רכיבי דף אחרים
• YAML (עוד פריסה Multicolumn)
• Emastic

זכור, שימוש במסגרות-CSS אינה מעידה כי אתה עצלן כדי ליצור אחד משלך ... זה מרמז על כך שאתה חכם כדי ללמוד מהניסיון אחרים & טעויות, לחסוך זמן ולהגדיל את הפרודוקטיביות!!

עם מוגבלות הגדרת המיומנות שלי עם כלים כמו Photoshop ו Illustrator, אני בכנות יכול להודות מפתח אני יותר טוב אני מעצב. אבל הרקע שלי עם הליבה (בצד השרת) עם פיתוח Java / PHP / COBOL, הייתה השפעה חיובית על מיומנויות פיתוח ממשק המשתמש שלי. כוונתי היא, תוך יצירת עיצובים שלי, כלומר בכל פעם שאני עושה עיצוב, אני חושב על איך העיצוב ניתן להמיר הטוב ביותר ל-HTML, CSS ותוך HTML-CSS, אני נותן מחשבה על הטכנולוגיה backend וודא סביר כי ה-HTML יכול להיות מיושם בקלות XSL לולאות או PHP קטעי וכו '

במשך שנים אני נזרק ראש על עיצובים של מעצבי ממשק משתמש שכנראה donot לי מושג מה ה-HTML או CSS הוא. כל השנים חשבתי שאני מבקש יותר מדי, אם אני רק מצפה מעצב, שמנסה shov "אי אפשר הקוד" שלו העיצוב לתוך הגרון שלי, כדי להבין קצת מה התכנון שלו היה להיות מומר אל. זה יכול לעזור נכון?

לאחר מכן, נתקלתי בפוסט הזה היום ... מעצבי אתרים שאינם יכולים קוד ... ה 'תודה! אני רק אחד מני רבים אשר מרגיש אותו הדבר ... artitle לעיל הוא קצת נשימה ארוכה .. אבל שווה לקרוא, כל מילה בו.

תודה אליוט מניות ג'יי ... אני מרגיש הקלה!

הנה כמה קטעים מן המאמר אליוט .

וואו, איזה יום! זה התחיל עם ציוץ אחד קטן והסתיים בדיון שנראה לטאטא פני הקהילה האינטרנט כל העיצוב. נראה שיש כמה דעות מוצקות מאוד שהתקיימו בנושא האם מעצבי אתרים צריכים להיות מסוגלים קוד.
...
לכן, לפני שאנחנו נכנסים לזה, הרשו לי לסכם במהירות את מה שאמרתי על הבוקר בטוויטר:

בכנות, אני בהלם, כי בשנת 2010 אני עדיין להיתקל של מעצבי אינטרנט של שאינם יכולים קוד העיצובים שלהם. לא תירוץ.

... אני צריך להיות קצת יותר ספציפי ב ציוץ שלי. אני מדבר על מעצבים שאין להם אפילו HTML בסיסי ביותר ומיומנויות-CSS להפוך עיצוב שטוח לתוך האתר עצמו. לא אנשים בכוונה בוחרים לא קוד, ומי לא. ואני גם מתכוון רק לקוד חזיתי כאן, כמובן שזה מגוחך לחשוב מעצבים צריכים גם להיות מדהים עורפיים מתכנתים ...

אנחנו מקבלים של אינטרנט של עיצובים שנשלחו Illustrator, 300dpi, אי אפשר קוד, אין עקביות / שימושיות.
~ איימי Mahon

כבר מאוחר, ואני צריך לעטוף את זה איכשהו. אני יודע שיהיו רבים שלא מסכימים איתי, הכוונה שלי היא לא להעליב או להרגיז מישהו שיכול לא קוד, אבל אני מקווה שחלק מה שאמרתי משקף כמה נקודות זה תמיד לבוא כאשר להתעמק זה ויכוח.

בסופו של יום, אני לא מאבד שינה על כל מי יכול קוד אשר יכול. אני פשוט באמת מופתע לגלות כל כך הרבה מעצבים חסרי חזיתיים מיומנויות, כמו שחשבתי זה היה נחלת העבר.

גם לקרוא את התגובות, היו כ 320 תגובות, כשאני כותב ... הם שווים קריאה.
אנא קראו את הפוסט המלא כאן אליוט .. מעצבי אינטרנט שאינם יכולים קוד

אתמול, לאחר ההנפקה נתקלתי עם איפוס ה-CSS ב-Google Chrome ... חשבתי על לחפור קצת יותר עמוק לתוך השטח של סוכן דפי משתמש סגנון ...
מצא את הטבלה על ערכי ברירת המחדל של CSS2.1 סוכן המשתמש גיליונות סגנון ... (למי מודע למה "סוכן המשתמש גיליונות סגנון" הוא פעל מהו סוכן המשתמש גליונות סגנון (מפרט) .

לרשימה מלאה של CSS 2.1 סוכן המשתמש המחדל בגיליונות סגנון לחץ כאן

אתמול, כמו בכל "יום החזיר קרקע" אחרים, עבדתי על כמה פריסות CSS / tableless. הכל הולך טוב IE 7, FF 3 ו Chrome, untill פתאום, ראיתי כמה בלתי ignorable שולי לראות רק ב-Google Chrome. אם כי מוזר מאוד worring, זה היה קצת בעיה באג / חדש באתי accross, לא היה סוף סוף קצת ספייס בעבודה שגרתית שלי. עצוב (אבל נחמד) זה הלך קבוע בתוך כמה דקות של בדיקה ...

בעיקרון, זה נראה כמו Google Chrome התעלם איפוס CSS שלי (שולי: 0px). זה בעצם נגרם על ידי סגנונות User-agent (-WebKit-padding-התחלה: 40px). אז הפתרון היה לאפס את הסגנון על ידי קביעת ריפוד: 0 האלמנטים שלא התנהג יפה.
דרך טובה למנוע את הבעיה הזו לא יקרה לכל רכיב היא שימוש יתר העולמי CSS כדלקמן

* {Margin: 0; padding: 0;}

מה זה סוכן המשתמש גליונות סגנון (מפרט)?
הקטע הבא לקוח מתוך http://meiert.com/en/blog/20070922/user-agent-style-sheets/ הקישור, בצע לקרוא יותר על סוכן גיליונות סגנון משתמש

CSS 1 מציג את הרעיון באומרו כי כל סוכן משתמש (UA, לעתים קרובות 'דפדפן אינטרנט' או 'לקוח אינטרנט') יהיה ברוחב הגיליון המציג מסמכים סביר - אבל ללא ספק ארציים - באופן. CSS 2 אומר כי סוכני משתמש העומדות חייב להחיל גליון סגנונות ברירת המחדל (או להתנהג כאילו הם עשו) וכי פול גז סוכן של המשתמש גיליון צריך להציג את האלמנטים של שפת המסמך בדרכים לספק את הציפיות מצגת כלליים לשפה את המסמך, CSS 3 צפוי להיות של אותה נפש.

מאז במפרט-CSS להשאיר אותו עד מימושים האם להשתמש בגיליון "אמיתי" בסגנון לתצוגה מחדל או לא, זה לא מדהים, כי אתה לא מוצא את סגנון ברירת המחדל של הגיליון בתיקיית ההתקנה של כל דפדפן. שלא כמו את Internet Explorer של מיקרוסופט כמו גם אופרה, למשל (וגם עד כמה שאני יודע), דפדפנים השממית כמו Firefox ו-Netscape Navigator (לחפש "html.css"), אלא גם Konqueror את זה פשוט יותר להבין את סגנון ברירת המחדל שלהם.

גם אני חדש מאוד ממשק משתמש (UI) פיתוח ואני גם לא ותיק כמו שאני תמיד לשים את זה, אני להתאים את הפרופיל של UI Developer יותר מזה של מעצב, ללא חרטות. נו טוב! מה חשבתי לכתוב על? במשך זמן מה ... (חייב להיות שנה לא פחות) עכשיו, מדי פעם כאשר אני נכנס קצת עיצוב ממשק משתמש (כאשר מעצב מקצועי הלך לחופשה), אני לא יכולה להפסיק לחשוב תמיד אם העיצוב שלי צריך להיות complient כראוי או לא (באמת, לא יכולתי achive 100% תאימות סטנדרטים, אם הייתי רוצה יותר מדי). ואז אני אומר לעצמי, איזה שטויות! ... העיצוב צריך להיות פשוט, נחמד ובעיקר נראה שמיש, זה לא צריך להפוך את המבקרים לברוח ... או להקפיץ (להיות טכני). מה טוב פריסת נחמד tableless CSS יהיה המבקר, שהוא מתעלם מכל HyperText חכם גיליון סגנונות מדורג מתחת לעור של דף האינטרנט שלך ... אפס!
זה אמור להיראות נחמד להיות קל לשימוש ... ואז בא דברים בכל התקנים.

אני stumbbled accross ערך זה הבלוג של ג'ייסון פריד של 37 אותות (למי לא מודעים 37 אותות הם onces שיצרו כמה יישומי אינטרנט מדהים כמו Basecamp, וכו 'מדורת השבט) שכתבו משהו דומה ב 2004 ותאמינו לי, כמעט 5 שנים ולא השתנה הרבה מאז כי ... שמחתי לקרוא את ההודעה שלו, אני מסכים לחלוטין עם מה שיש לו לומר גם את העובדה, אותה הוא לא בטוח על מה הוא מספר על ההרגשה שלו רק שלה במעיים ולכן הוא שלי

ג'ייסון פריד: "יש הרבה יותר מדי לדבר על CSS ו-XHTML ו לתקנים נגישות ולא מספיק לדבר על אנשים. CSS ו קוד תקני תואם הם רק כלים - אתה צריך לדעת מה לבנות עם כלים אלה. נהדר, אני שמח UI שלך לא להשתמש בטבלאות. אז מה? למי אכפת אם זה עדיין לא נותן לאנשים להשיג את מטרותיהם. תקני האינטרנט הם נהדרים, אבל אמות המידה של אנשים כוללים מקבל דברים לעשות (וזה עדיין קשה מדי לעשות באינטרנט).

מעצבי ממשק משתמש עושים אותו זקן היסוד "לשכוח את האדם בצד השני" טעויות - אלא שהפעם הקוד שלהם נראה טוב יותר. בני אדם - לא validators קוד - ממשקי שימוש ".

לכתבה המלאה Checkout ג'ייסון פריד של

DISCALIMER: זה לא אומר שאנחנו לא צריכים לטרוח על סטנדרטים בכלל. התקנים הם טוב שיש ולעמוד בהם ככל האפשר. אנחנו רק צריכים להבין כי עיצוב ממשק משתמש טוב לא תמיד אומר 100% תקני Complience או להפך ....

מהרשימה שלי המלומד שיעורים, אני עוקב אחרי עיצוב ממשק המשתמש מעטים פיתוח כללי הזהב ... Heres 10 ראש ... לא כי יש לך לעקוב אחריהם מדי ...

1. שמור על המשתמשים. המשתמשים יכול לעשות או לשבור את האתר שלך. DONOT לעשות מבט המשתמש כמו idoit הכולל, מסוגלת לחלוטין של שימוש אתר האינטרנט שלך. זה רע!

2. לשמור על פשטות וקלות השימוש guidlines הראשי שלך. יותר מדי דברים על המסך, כך עולה ההסתברות של המשתמש יהיה להתבלבל או מוסחת מן המשימה המקורית.

3. להיות בגבולות של ... DONOT להתפנק יותר מדי אל תוך נגישות ושימושיות, ותקנים. שימוש בסטנדרטים ביעילות ולגרום להם להבין לצוות. זה יהיה להבטיח עקביות ממש המוצר

4. אב הטיפוס דרישה. מאז, בימים אלה ממשקי שימוש עשירים, דיגום תמיד עדיף רק עושה wireframes פשוטים האחרון הוא חלל של אינטראקציות הגונים, זה היה לא מצליחים לספק את הלקוח תמונה ברורה של המוצר הסופי, כי הוא מפותח. תמיד קל יותר להמיר את אבות הטיפוס אל התוצרים הסופיים. כן! עם דיגום בעיות כל אינטראקציה יכול להיות מגוהץ החוצה בשלב מוקדם יותר במחזור הפיתוח.

5. עקביות בעיצוב שלך אינטראקציה חשובה מאוד. Donot לבלבל את המשתמש עם אינטראקציות ו Gizmos בלתי צפויות.

6. הבן שלך "Mission Design משפט". Aways להתמקד הפעולה העיקרית של beign דף מעוצב. כמו כן, ערוך רשימה של פעולות seconday שלך על הדף, לתעדף אותם.

7. ספק משוב ראוי המשתמשים באתר. עם רוב אתרי האינטרנט תוכנן סביב AJAX, מספקים רמזים חזותיים המשתמש על שינויים בדף. למשתמש יש לתת הכרה השלמת כל משימה שהוא מבצע. Donot את המשתמש להמתין כנראה, עבור למשל. לספק אינדיקטורים התקדמות uplaods קבצים.

8. השתמש שולטת כראוי. לשימוש כגון בחירת הרשימה הנפתחת עבור רשימות קטנות בלבד, donot לאפשר למשתמש לבחור אחד של 200 ערים שימוש בתיבות נבחרים. להבין את ההבדל בין הכפתור וקישור. הקישור בלחצן יש מטרות שונות, donot משתמש אחד עבור השני. ספק את השליטה הזכות לבצע אינטראקציה עם דף קל יותר. הימנעו שימוש בתפריטים, כי הם יותר משתי רמות עמוק. לא להמציא את הגלגל מחדש. שימוש בפקדים סטנדרטיים, להתאים אותם רק אם יש צורך בכך מאוד. הגדרת כל הפקדים המותאמים אישית הנדרשים מצד האתר הראשון שלך, כדי שיוכלו להיווצר ונבדקו באופן עצמאי, מוכן לשימוש באתר accross.

9. Donot לחזר יותר מדי על עיצוב. זכור! המוצר כולו מורכב יותר, כי העיצוב לבד. לבנות צירי זמן מתאימים את לוח הזמנים עבור הפרוייקט חזרות עיצוב לדבוק בה. איטרציה עוזר לנו לגלות מה עובד ומה לא, לבחור את הנקודות הבעייתיות. כמו ממשק טוב לוקח זמן, לספק זמן חזרות ב שהביאו לפריצתה של מחזור הפיתוח, כך חזרות עיצוב doesnot ישירות משווים לעבד מחדש. מדי חוזרת הרבה יכול jeopradize מועדים.

10. להישען לאחור ולחשוב כמו משתמש לפעמים.

ראית animoto.com? טוב! זו אינה פרסומת, אני באמת אהבתי את זה! והוא נשק UI התחת אכן

נתקלתי באתר הזה לפני כמה שבועות. ראה את העמוד הראשון, מה 'תם לטרוח הרבה. בשבילי, זה היה סתם עוד אתר עם מעט תוכן פלאש עשיר, המאפשר למשתמשים להעלות תמונות, לבחור חלק אחר ולהפוך אותו במצגת תמונה יפה. הורד FLV, ושם אותו בכל אתר על פי בחירתך (YouTube, Metacafe, פייסבוק ואת אוהבת) ... נקודה.

אתמול כשראיתי את הדפים הזרימה הפנימית, אשר לקח את המשתמש לאורך תהליך היצירה של שקופיות זה .... הלכתי וואו! כשהבנתי שאין קצת FLASH בשימוש. זה היה אמנם ממשק משתמש עשיר. כל מפתחי ממשק משתמש לשאוף ליצור או לפחות להיות חלק מהצוות כי עשה זאת ממשק .... פשוט מבריק! ומעורר השראה!

יש להסתכל ... http://animoto.com/ ... ולרשום ולשחק עם זה ... רק אז אתה יכול להעריך את גאון.

כשקראתי את המאמר הזה ברשימת מלבד " מיקום מוחלט פו
על ידי אריק סול ", הייתי לא פחות מתרשם. הייתי בדיכאון גם majorly, כי, באמת שאלתי את עצמי, למה אני לא יכולה לחשוב על משהו מדהים כמו זה.

בדרך כלל, כאשר אנו יוצרים פריסות CSS, אנו משתמשים "עמדה" או "מרחפת", או שילוב רע מאוד של שניהם. אריק סול וצוותו מגדירים לצד הטכניקה המושלמת של סוג חדש של טכניקת פריסת CSS, אשר הם לנצרות כמו "מיקום מוחלט פו" אחרי הטכניקה עמודות פו המדמה את נוכחותו של העמודה.

אתה יודע כי הבעיה של כולנו מפתחים-CSS יש עם פריסות מתפוררים (השינויים תוכן בלתי צפויים הגורמים עמודים שלמים לעטוף, כאשר אנו משתמשים פריסות צוף) ... טוב! נראה היסטוריה!!
טכניקה זו הפריסה עדיין צעיר מאוד, וצריך לאשפה על ידי כל אותם גורואים-CSS שם בחוץ, לפני שהוא הופך בלתי רגילה בכתב. אני שמח להשתמש בו עכשיו! ... ואני כבר לאמצע של המרת בעייתיים מוקדם יותר / משתנה שלי בלתי בהכרח לתוך פריסות פריסת FAP כבר ... ואני שמח לומר "אנחנו כבר באמצעות מיקום מוחלט פו באתר את הבלוג הזה, כמו גם" ... לך לנסות את זה, עכשיו!

כבוד אריק!

עוד על אלמנטים DOM בדף, זה הופך איטי יותר, איטי יותר היא גישה של DOM ב JavaScript. מספר גבוה של אלמנטים DOM יכול להיות פריסת בשל עיצוב רע. לדוגמה, טבלאות מקוננות אולי למטרות פריסה. השתמש בכל תג HTML שבו הוא הגיוני מבחינה סמנטית. עבור למשל שולחנות DONOT שימוש עבור פריסות, אבל DONOT תהססו להשתמש בהם שבו אתה צריך להציג נתונים טבלאיים, ולכן ישתמשו לצמצם אלמנטים DOM, לעומת זאת, למבנה דומה שנוצרו באמצעות divs בלבד ..

כדי לבדוק את מספר אלמנטים DOM של דף ה-HTML, פשוט הקלד את השורה הבאה במסוף של Firebug: document.getElementsByTagName('*').length

אין תקן כאמור על כמה אלמנטים DOM יותר מדי. בדוק דפים דומים אחרים שיש להם markup.Eg טוב. דף הבית יאהו הוא דף די עסוק, ועדיין תחת 700 אלמנטים (תגי HTML).

השתמש קבל לבקשות AJAX,

זה נמצא כי בעת שימוש XMLHttpRequest, POST מיושם בדפדפנים את תהליך בן שני שלבים: לשלוח את הכותרות תחילה, ואחר כך שליחת הנתונים. כך שעדיף להשתמש GET, אשר לוקח רק 1 חבילת TCP לשלוח (אלא אם כן יש לך הרבה עוגיות). אורך כתובת האתר המקסימלי ב-IE הוא 2k, כך שאם אתה שולח יותר נתונים 2K ייתכן שלא תוכל להשתמש GET.
השפעה הצד המעניין הוא POST מבלי פרסום כל הנתונים מתנהג כמו GET. מקבל הוא מיועד אחזור מידע, אז זה הגיוני (סמנטי) להשתמש מקבל כאשר אתה רק מבקש נתונים, בניגוד שליחת הנתונים יאוחסנו בצד השרת.

הימנע סינכרוני שיחות AJAX,

בעת ביצוע "אייאקס" בקשות, אתה יכול לבחור סינכרוני או מצב סינכרון. סינכרוני במצב פועל בקשה ברקע בזמן הפעילות דפדפן אחר יכול להמשיך לעבד. סינכרון מצב תמתין בבקשה לחזור לפני שתמשיך.
בקשות עם מצב סינכרון יש להימנע. בקשות אלה יגרמו הדפדפן לנעול למשתמש עד שב בקשה. במקרים בהם שרת עסוק ותגובה לוקח זמן, הדפדפן של המשתמש (ואולי מערכת ההפעלה) לא יאפשר שום דבר אחר לעשות. במקרים בהם התגובה לא תתקבל לעולם, כמו שצריך, הדפדפן עשוי להמשיך לחסום עד הבקשה שהוקצב.
אם אתה חושב שהמצב שלך מחייב מצב סינכרון, הגיע הזמן כנראה לחשוב מחדש על העיצוב שלך. מצבים מעט מאוד (אם בכלל) בעצם דורשים בקשות אייאקס במצב סינכרון.

מטב תמונות

אופטימיזציה פירושה שמירה על גודל קטן של התמונה שמירה על איכות התמונה לרמה הנדרשת. יש המון פרוצדורות פעם יכול לבצע על מנת לייעל את התמונות לפני שהם נטענים לשרת למסירה. הכלים בהם אנו משתמשים ליצירת תמונות אלה (Photoshop, זיקוקים וכו ') יש בדרך כלל כלים המאפשרים למשתמשים לייעל את התמונה לשימוש באינטרנט.
• בדוק של GIF כדי לראות אם הם משתמשים לוח בגודל המתאים למספר של הצבעים בתמונה. כאשר התמונה היא באמצעות 4 צבעים צבעים 256 צבעים, ואז התמונה יכול להיות מותאם יותר

• המר GIF זה למקום של PNG אפשרי לראות אם יש חיסכון. ברוב המקרים, אין. אל תהססו להשתמש של PNG, כפי שהם נתמכים באופן מלא על ידי רוב הדפדפנים הנפוצים. מצפים את יכולות אנימציה PNG יכול לעשות מה GIF עושה, כולל שקיפות.

• עבור תמונות בשימוש שדונים CSS, לארגן את התמונות ספרייט אופקית בניגוד אנכית בדרך כלל גורמת לגודל קובץ קטן יותר. כמו כן, לשלב תמונות עם צבעים דומים ספרייט. זה עוזר לך לשמור על מספר צבעים נמוך, באופן אידיאלי תחת 256 צבעים כדי להשתלב PNG8.

• אם אתה משתמש favicon.ico, לשמור את זה קטן, רצוי תחת 1K.

השתמש בקנה מידה כראוי / לשנות את הגודל של התמונה.

תמיד לנסות להשתמש בתמונות גודל, כלומר לא משתמשים תמונה גדולה יותר ממה שאתה צריך רק בגלל שאתה יכול להגדיר את הרוחב והגובה ב-HTML. אם אתה צריך להציג את התמונה 100px X 100px על הדף, אז לא משתמשים scaled למטה תמונה 200x200px.

השתמש תמונות מתקדמת

דפדפן האינטרנט כבר הופך תמונות בהדרגה. כדי לעשות עוד יותר טוב, פשוט לשמור GIF או תמונות PNG עם אפשרות "שילב", או תמונות JPEG שלך עם האפשרות "מתקדמת".

יש דיון מתמשך בין הגולשים בשאלה אם השימוש בתמונה מתקדמת היא ברכה או מכשול. גם תמונה פרוגרסיבית שוקל כ 20% יותר מאשר עמיתו מתקדמת לא שלה. לכן, אם אתה חושב שאתה עושה שימוש פריסת תמונות שלא תפגעו למשתמש חוויה ידי זה להיות פרוגרסיבי, אתה מוזמן לעשות זאת.