עיצוב אתר אינטרנט

דוגמה לעיצוב אתר אשר משתמש ב-Layouts באמצעות CSS

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

מטרת עיצוב האתר היא ליצור את האתר בצורה מיטבית. האתר מורכב למעשה מאוסף של קבצים אלקטרוניים המאוחסנים בשרת אינטרנט, אשר משגר אותם להצגה בצורה של דפי אינטרנט. אלמנטים מסוג זה כמו טקסט, תמונות (אשר נפוצות בעיקר בפורמט GIF , JPEG, PNG), טפסים אותם ניתן למקם על גבי עמודים אשר משתמשים ב-HTML או XHTML או XML. תצוגה של מדיה מורכבת יותר (כגון גרפיקה וקטורית, אנימציות, וידאוים, קובצי שמע) דורשת לרוב התקנת פלאגינים חיצוניים לצורך הפעלתם כגון פלאש, QuickTime, יישומוני Java ועוד.

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

עם הגידול בכמות האנשים אשר מתמקצעים בתחום עיצוב תקשורת חזותית (Communication Design) ובתחומי טכנולוגיית המידע (Information technology), מרבית העוסקים כיום בענף זה נוהגים להבדיל בין ההתמקצות בעיצוב אתרי אינטרנט (Web design) לבין ההתמקצעות בפיתוח רשתות (Web Development) - עבודה אשר מתמקדת בתחזוקה הכוללת של כל השירותים מבוססי הרשת.

היסטוריה

טים ברנרס-לי, ממציא ה-World Wide Web, פרסם אתר אינטרנט לראשונה באוגוסט 1991. ברנרס-לי היה הראשון אשר שילב תקשורת אינטרנט (על גביה פעלו רשתות הדואר האלקטרוני ו-Usenet במשך עשורים) עם היפרטקסט (אשר גם היה זמין במשך עשורים, אבל הוגבל לגלישה במידע שאוחסן במחשב יחיד). דפי אינטרנט נכתבים בשפת תגיות הנקראת HTML, והגרסאות המוקדמות של שפת ה-HTML היו פשוטות יחסית, ונתנו לאתרי האינטרנט הראשונים רק מבנה בסיסי (כותרות ופיסקות), והיכולת לקשר באמצעות היפרטקסט. זה היה חידוש לצורות התקשורת אשר היו קיימות עד כה - המשתמשים יכלו כעת בקלות לנווט לעמודים אחרים על ידי לחיצה על היפר קישור בין עמוד לעמוד ברשת האינטרנט.

ככל שרשת האינטרנט ועיצוב אתרי האינטרנט התקדמו, שפת התגיות השתנתה והפכה יותר מורכבת וגמישה ביכולתיה ונותנה את היכולת להוסיף אובייקטים כגון תמונות וטבלאות לעמודי האינטרנט. תכונות כמו הטבלות, אשר נוספו בהתחלה כדי להציג מידע בצורת טבלאות בלבד, עברו במהרה לשימוש בוני האתרים ככלי בעזרתו יצרו מבנה (layout) בלתי-נראה. כאשר התווספו גיליונות סגנון מדורגים (CSS), השימוש בטבלאות לבניית מבנים (layouts) הפך לשיטה מיושנת. טכנולוגיות אינטגרציה של מאגרי נתונים כגון Server-side scripting ותקנים כמו CSS שינו ושיפרו את הדרך בה נבנית רשת האינטרנט.

עיצוב אתר אינטרנט

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

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

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

אתר אינטרנט בצורה אופיינית מורכב מטקסט ותמונות. העמוד הראשון של אתר האינטרנט ידוע בשם דף בית (Home page) או אינדקס. חלק גדול מאתרי האינטרנט בנויים בצורת "עמוד ספלאש" (Splash Page). עמודי ספלאש אופייני יכלול קטע של דברי פתיחה, אפשרות לבחירת שפה/אזור מגורים, או תניית פטור (Disclaimer). כל עמודי האינטרנט בכל אתרי האינטרנט בנויים בקובץ HTML להם כתובת אינטרנט משלהם (URL). לאחר שכל עמודי האינטרנט נוצרו, הם לרוב מקושרים ביניהם דרך תפריט ניווט אשר מכיל קישורים לכל העמודים. ככל שמהירויות הגלישה התגברו במשך השנים, טווח הקשב של גולשי האינטרנט הפך קצר יותר וכמות הגולשים גדלה - דבר אשר הוביל לשימוש מופחת ב"עמודי ספלאש" במיוחד באתרי האינטרנט המסחריים.

דפי אינטרנט מסוווגים כדפים סטטיים או דינמיים:

• עמודים סטטיים לא משנים את תוכנם או את המבנה שלהם כאשר המשתמש גולש בהם, אלא אם כן מישהו (מנהל אתר אינטרנט או מתכנת) מעדכן באופן ידני את הדף.
• עמודים דינמיים מתאימים את התוכן או את המראה שלהם לפי הקלט אותו הם מקבלים ממשתמש הקצה או לפי אינטראקציה או שינויים אשר מתרחשים במחשב עצמו (המשתמש, הזמן, שינויים במאגר הנתונים, וכו'). תוכן יכול להשתנות בצד של מחשב הלקוח (המחשב של משתמש הקצה) באמצעות שימוש בשפות תסריט (JavaScript, ActionScript}, וכו'). על מנת לעדכן באופן דינמי את תוכן הDOM (בDHTML. תוכן דינמי לעתים קרובות עובר קומפילציה בצד השרת באמצעות שפות סקריפט מבוססת שרת (Coldfusion, ASP, JSP, Perl, PHP, Python, וכו'). שתי הגישות לרוב משתמשות באפליקציות מורכבות.

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

דרישות רב תחומיות

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

נושאים רלוונטיים

HTML

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

• Microsoft FrontPage - עורך (בוטל בשנת 2003) HTML המשתמש בתכונת WYSIWYG, וכלי לניהול אתרי אינטרנט, מתוצרת מיקרוסופט.
• Macromedia Dreamweaver.

CSS

ערך מורחב – Cascading Style Sheets

גרפיקה

• אדובי פוטושופ - תוכנת עריכה גרפית מתוצרת אדובי מערכות.
• Paint Shop Pro - תוכנת עריכה גרפית מתוצרת JASC.

אדובי פלאש

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

ראו גם

• עיצוב מידע
• עיצוב גרפי

קישורים חיצוניים

• 
  שגיאות פרמטריות בתבנית:הארץ
  פרמטרי חובה [ 4 ] חסרים רפאל פוגל, מותו של מפתח האתרים, באתר הארץ