יום שישי, 25 בספטמבר 2009

טיפים בעיצוב דפי אינטרנט -HTML

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

HTML וגרפיקה תגי גובה ורוחב
כל הגרפיקה בדף שלך ( אפילו כפתור קטן או גרפיקה של אייקון ) צריכה לכלול תגי גובה ורוחב. התגים האלה אומרים לדפדפן כמה מקום להקדיש לגרפיקה בדף, והם מאפשרים לדפדפן להעלות את הדף עוד לפני שהקבצים של הגרפיקה התחילו להיטען. אף על פי שזה לא מאיץ את קצב ההורדה , זה נותן למשתמש לראות את מבנה הדף יותר מהר. גושי הטקסט יתמלאו ראשונים ואז קבצי הגרפיקה "ישפכו" לתוך הרווחים המוקצבים. זה אומר שהמשתמש יכול להתחיל לקרוא את הדף שלך בזמן שהגרפיקה יורדת.
רקע צבעוניצבעי רקע ברשת מציעים אפשרות לשנות את המראה של הדפים שלך מבלי להוסיף גרפיקה. הם גם נותנים לך לשפר את הקריאות בדפים שלך.
הצבע מפורט בתג בקוד הקסדצימלי, שבו ששת היסודות נותנים את ערכי האדום, ירוק, וכחול שיוצרים את הצבע. בתג, הקוד תמיד מופיע אחרי סימן "#" : (#RRGGBB). מכיוון שהנושא הזה עכשיו מטופל חזותית על ידי הדור החדש של תוכנות העריכה, לא נתעמק בהמשך בנושא.
צבעי רקע וקריאותהרשת מלאה בדפים שבהם הקריאות שולית בגלל בחירה גרועה בצבע רקע ושילובים של צבע של הטקסט. טקסט שקשה לקרוא הוא הפרעה לקורא, ושילובים מסוימים של צבע הופכים דפים ללא קריאים למשתמשים עיוורי צבעים ( 10 אחוז מהזכרים עיוורי צבעים באופן חלקי ). הקריאות של טקסט על מסך המחשב כבר יורדת כתוצאה מרזולוציית מסך נמוכה. מסך מחשה המקינטוש או חלונות הטיפוסי מציג טקסט ב- 72 על 80 נקודות לאינטש. טקסט שחור על רקע לבן יוצר את הקונטרסט של הכולל הכי טוב לקריאות. רקעים שחורים פחות נוחים באופן משמעותי לקריאה מרקעים לבנים, אפילו כאשר טקסט לבן משומש לקונטרסט מירבי. רקעים צבועים יכול לעבוד כאלטרנטיבה לברירת המחדל של הדפדפן אם הצבעים הם מאוד שקטים,( פסטלים, אפור בהיר, וצבעי אדמה בהירים עובדים בצורה הטובה ביותר ).
תבניות רקעמשתמש ב-GIF או ב-JPEG ליצירת תבנית רקע. המאפיין הזה שנוי במחלוקת, כי את הדפים שמשתמשים בתבניות רקע גדולות לוקח יותר זמן להוריד וכי תבניות הרקע נוטות להפוך דפים לקשים יותר לקריאה.
כדי להתאים לשימוש כטקסטורה של רקע, הגרפיקה צריכה להיות תמונת GIF או JPEG קטנה, כ- 100 x 100 פיקסלים. מניסיוננו, תבניות JPEG עולות קצת יותר מהר מ-GIF.
תמונות ממופותתמונות ממופות מציעות דרך להגדיר אזורים של קישורים בתוך גרפיקה בדף. הדבר נעשה מאפיין סטנדרטי של רוב האתרים המקצועיים כי הוא מציע שילוב יעיל של מראה ופונקציונליות חזותית.
תמונות ממופות הן הדרך היחידה לכלול מספר קישורים בתרשים גרפי, כפי שניתן לראות
השתמשי בתמונת מפה בניית אתר לימודי וזה חוסך בפיקסלים וזמן טעינה
מקור : המדריך לבניית אתרים

אין תגובות:

הוסף רשומת תגובה