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

תוכן שנמחק תוכן שנוסף

בשורה

גרסה מ־00:05, 3 במאי 2011

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

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

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

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

היסטוריה

טים ברנרס-לי, ממציא ה-World Wide Web, פרסם אתר אינטרנט לראשונה באוגוסט 1991. דפי אינטרנט נכתבים בשפת תגיות הנקראת HTML.

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

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

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

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

אתר אינטרנט בצורה אופיינית מורכב מטקסט ותמונות. העמוד הראשון של אתר האינטרנט ידוע בשם דף בית (Home page) או אינדקס. לכל עמוד באתר כתובת אינטרנט משלו (URL).

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

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

עמודים סטטיים הם למעשה קבצים שמאוכסנים בשרת, ונשלחים אל הגולשים כמו שהם.
עמודים דינמיים מיוצרים על ידי השרת, בדרך כלל לפי מידע משתנה שמאוחסן בבסיס נתונים או בקבצים שאינם בצורת דפי HTML בעצמם. שרת האינטרנט גם יכול לייצר את הדפים בעזרת מידע שהוא מושך דרך הרשת ממקורות אחרים. בדרך כלל התכנה שמייצרת את הדפים כתובה בשפת תכנות המכונה "שפת צד שרת". דוגמאות לשפות כאלו הן: (Java, ASP, JSP, Perl, PHP, Python).

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

עיצוב אתרי אינטרנט כולל דיסציפלינות שונות, ובהן - מערכות מידע, טכנולוגיות מידע ועיצוב תקשורת חזותית. נהוג להפריד את העבודה על אתר אינטרנט ל-Front-endול-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 ] חסרים רפאל פוגל, מותו של מפתח האתרים, באתר הארץ

@@ שורה 1: / שורה 1: @@
-[[תמונה:CSSZenGardenLikeTheSea.png|240px|ממוזער|דוגמה לעיצוב אתר אשר משתמש ב-[[Layouts]] באמצעות [[CSS]]]]
+[[תמונה:CSSZenGardenLikeTheSea.png|240px|ממוזער|דוגמה לעיצוב אתר בעזרת [[Layouts]] ו-[[CSS]]]]
-'''[[עיצוב]] [[אתר אינטרנט]]''' הוא תהליך של המשגה (conceptualization), תכנון, עיצוב, וביצוע של תוכן המיועד לצפייה באמצעות [[דפדפן]], ולכן מוגדר באמצעות [[שפת תגיות]] (markup language) שאותה הדפדפן מסוגל לפענח ולהציג כ[[ממשק משתמש גרפי]] (GUI). האתר מורכב מ[[דף אינטרנט|דפים]] המוצגים כל אחד בנפרד, והעיצוב כולל את העיצוב של כל אחד מהדפים המוצגים, במסגרת עקרונות העיצוב של האתר כולו.
+'''[[עיצוב]] [[אתר אינטרנט]]''' הוא תהליך של המשגה (conceptualization), תכנון, ועיצוב המיועד לצפייה באמצעות [[דפדפן]], ומוגדר באמצעות [[שפת תגיות]] (markup language) שאותה הדפדפן מסוגל לפענח ולהציג. האתר מורכב מ[[דף אינטרנט|דפים]] המוצגים כל אחד בנפרד, ובדרך כלל [[היפר קישור|מקושרים]] ביניהם. העיצוב כולל את העיצוב של כל אחד מהדפים המוצגים, במסגרת עקרונות העיצוב של האתר כולו.
+הדפים בנויים מאלמנטים עיצוביים (כמו מסגרות, טבלאות, רקעים וכדומה), מלל, תמונות, [[טופס (אינטרנט)|טפסים]], ועוד.
-מטרת עיצוב האתר היא ליצור את האתר בצורה מיטבית. האתר מורכב למעשה מאוסף של קבצים אלקטרוניים המאוחסנים ב[[שרת HTTP|שרת אינטרנט]], אשר משגר אותם להצגה בצורה של דפי אינטרנט. אלמנטים מסוג זה כמו טקסט, תמונות (אשר נפוצות בעיקר בפורמט [[GIF]] , [[JPEG]], [[PNG]]), [[טופס (אינטרנט)|טפסים]] אותם ניתן למקם על גבי עמודים אשר משתמשים ב-[[HTML]] או [[XHTML]] או [[XML]]. תצוגה של מדיה מורכבת יותר (כגון [[גרפיקה וקטורית]], אנימציות, וידאוים, קובצי שמע) דורשת לרוב התקנת [[פלאג אין|פלאגינים]] חיצוניים לצורך הפעלתם כגון [[אדובי פלאש|פלאש]], [[QuickTime]], [[יישומון|יישומוני]] [[Java]] ועוד.
-שיפורים בתאימות של הדפדפנים עם הסטנדארטים של [[W3C]] הובילו לכך שהשימוש הנפוץ כיום ברוב אתרי האינטרנט הוא בשפת [[HTML]] או [[XHTML]] אותם ניתן לשלב עם [[CSS]] כדי למקם ועצב את האלמנטים והאובייקטים השונים של דפי האינטרנט. הסטנדרטים האחרונים של הדפדנים מכוונים לכך שכל הדפדפנים יעבדו עם מגוון רחב של מדיות והאפשרויות הנגישות למשתמש יתאפשרו גם מבלי השימוש בפלאגינים.
+שיפורים בתאימות של הדפדפנים עם הסטנדארטים של [[W3C]] הובילו לכך שרוב אתרי האינטרנט מוצבים בעזרת שפת [[HTML]] או [[XHTML]] בשילוב [[CSS]].
-עם הגידול בכמות האנשים אשר מתמקצעים בתחום [[עיצוב תקשורת חזותית]] (Communication Design) ובתחומי [[טכנולוגיית המידע]] (Information technology), מרבית העוסקים כיום בענף זה נוהגים להבדיל בין ההתמקצות בעיצוב אתרי אינטרנט (Web design) לבין ההתמקצעות ב[[פיתוח רשתות]] (Web Development) - עבודה אשר מתמקדת בתחזוקה הכוללת של כל השירותים מבוססי הרשת.
+עם הגידול במספר אנשי המקצוע בתחומי[[עיצוב תקשורת חזותית]] (Communication Design) ו[[טכנולוגיית המידע]] (Information technology), נהוג להבדיל בין מקצוע עיצוב אתרי אינטרנט (Web design) לבין [[פיתוח רשתות]] (Web Development) - עבודה שמתמקדת בתחזוקה הכוללת של כל השירותים מבוססי הרשת.
 == היסטוריה ==
+[[טים ברנרס-לי]], ממציא ה-[[World Wide Web]], פרסם אתר אינטרנט לראשונה באוגוסט [[1991]]. דפי אינטרנט נכתבים ב[[שפת תגיות]] הנקראת [[HTML]].
-[[טים ברנרס-לי]], ממציא ה-[[World Wide Web]], פרסם אתר אינטרנט לראשונה באוגוסט [[1991]]. ברנרס-לי היה הראשון אשר שילב תקשורת אינטרנט (על גביה פעלו רשתות [[דואר אלקטרוני|הדואר האלקטרוני]] ו-[[קבוצת דיון|Usenet]] במשך עשורים) עם [[היפרטקסט]] (אשר גם היה זמין במשך עשורים, אבל הוגבל לגלישה במידע שאוחסן במחשב יחיד). דפי אינטרנט נכתבים ב[[שפת תגיות]] הנקראת [[HTML]], והגרסאות המוקדמות של שפת ה-HTML היו פשוטות יחסית, ונתנו לאתרי האינטרנט הראשונים רק מבנה בסיסי (כותרות ופיסקות), והיכולת לקשר באמצעות [[היפרטקסט]]. זה היה חידוש לצורות התקשורת אשר היו קיימות עד כה - המשתמשים יכלו כעת בקלות לנווט לעמודים אחרים על ידי לחיצה על [[היפר קישור]] בין עמוד לעמוד ברשת האינטרנט.
-ככל שרשת האינטרנט ועיצוב אתרי האינטרנט התקדמו, שפת התגיות השתנתה והפכה יותר מורכבת וגמישה ביכולתיה ונותנה את היכולת להוסיף אובייקטים כגון תמונות וטבלאות לעמודי האינטרנט. תכונות כמו הטבלות, אשר נוספו בהתחלה כדי להציג מידע בצורת טבלאות בלבד, עברו במהרה לשימוש בוני האתרים ככלי בעזרתו יצרו מבנה (layout) בלתי-נראה. כאשר התווספו [[גיליונות סגנון מדורגים]] (CSS), השימוש בטבלאות לבניית מבנים (layouts) הפך לשיטה מיושנת. טכנולוגיות אינטגרציה של מאגרי נתונים כגון [[Server-side scripting]] ותקנים כמו CSS שינו ושיפרו את הדרך בה נבנית רשת האינטרנט.
+תכונות כמו הטבלות, שהוגדרו מלכתחילה כדי להציג מידע טבלאי, עברו במהרה לשימוש בוני האתרים ככלי עיצובי לשליטה על צורת הדף. מאוחר יותר הסטנדרט התפתח, ונוספה אליו הגדרת [[גיליונות סגנון מדורגים]] (CSS)שנחשב כיום לדרך נכונה יותר לשלוט בעיצוב הדף, וכיום רוב המעצבים משתדלים להגביל את השימוש בטבלאות להצגת מידע טבלאי בלבד.
 == עיצוב אתר אינטרנט  ==
+עיצוב אתר אינטרנט מוגדר כסידור ויצירת אוסף דפים, שביחד מהווים "אתר".
-אתר אינטרנט הוא למעשה אוסף של מידע על נושא או ספציפי או מכלול של נושאים. עיצוב אתר אינטרנט מוגדר כסידור ויצירה של עמודי אינטרנט אשר יחדיו מהווים אתר אינטרנט. עמודי האינטרנט באתר אינטרנט מכילים ידע אשר רלוונטי לאתר האינטרנט בו הם נמצאים.
-יש אספקטים רבים (שיקולי עיצוב) אשר נלקחים בחשבון בתהליך, ובשל ההתפתחות המהירה של רשת האינטרנט, אספקטים חדשים יכולים להיווצר גם כן. לאתרי אינטרנט אשר אינם מסחריים, המטרות יכולות להשתנות לכמות החשיפה הרצויה ומשוב הרצוי. לאתרי אינטרנט מסחריים טיפוסיים האספקטים הבסיסים בעיצוב האתר הם:
+יש אספקטים רבים (שיקולי עיצוב) שנלקחים בחשבון בתהליך, ובשל ההתפתחות המהירה של רשת האינטרנט, אספקטים חדשים יכולים להיווצר גם כן. עבור אתרי אינטרנט מסחריים טיפוסיים האספקטים הבסיסים בעיצוב האתר הם:
-* ''התוכן'': כל החומר אשר מאוחסן על גבי האתר צריך להיות רלוונטי לאתר וצריך להיות מכוון לקהל הידע אליו האתר מיועד.
+* ''תוכן'': החומר הנגיש באתר צריך להיות רלוונטי ומכוון לקהל היעד.
-* ''השימושיות'': האתר צריך להיות ידידותי למשתמש, עם ממשק פשוט ואמין אשר יהיה נוח לניווט.
+* ''שימושיות'': האתר צריך להיות ידידותי למשתמש, עם ממשק פשוט, אמין, ונוח לניווט.
-* ''המראה'': הגרפיקה והטקסט צריכים לכלול סגנון אחיד אשר יהיה עיקבי בכל עמודי האתר. הסגנון צריך להיות מעניין, רלוונטי ומקצועי.
+* ''מראה'': הגרפיקה והטקסט צריכים לכלול סגנון אחיד ועיקבי בכל עמודי האתר.
+* ''זמינות'': האתר צריך להיות ידידותי למנועי חיפוש ומדיות פרסום.
-* ''הזמינות'': חייב גם שיהיה קל למצוא את האתר דרך רוב, אם לא כל, מנועי החיפוש העיקריים ומדיות הפרסום.
-אתר אינטרנט בצורה אופיינית מורכב מטקסט ותמונות. העמוד הראשון של אתר האינטרנט ידוע בשם [[דף בית (אתר)|דף בית]] (Home page) או אינדקס. חלק גדול מאתרי האינטרנט בנויים בצורת "עמוד ספלאש" (Splash Page). עמודי ספלאש אופייני יכלול קטע של דברי פתיחה, אפשרות לבחירת שפה/אזור מגורים, או [[תניית פטור]] (Disclaimer). כל עמודי האינטרנט בכל אתרי האינטרנט בנויים בקובץ HTML להם כתובת אינטרנט משלהם ([[URL]]). לאחר שכל עמודי האינטרנט נוצרו, הם לרוב מקושרים ביניהם דרך תפריט ניווט אשר מכיל קישורים לכל העמודים. ככל שמהירויות הגלישה התגברו במשך השנים, טווח הקשב של גולשי האינטרנט הפך קצר יותר וכמות הגולשים גדלה - דבר אשר הוביל לשימוש מופחת ב"עמודי ספלאש" במיוחד באתרי האינטרנט המסחריים.
+אתר אינטרנט בצורה אופיינית מורכב מטקסט ותמונות. העמוד הראשון של אתר האינטרנט ידוע בשם [[דף בית (אתר)|דף בית]] (Home page) או אינדקס. לכל עמוד באתר כתובת אינטרנט משלו ([[URL]]).
+אתר אינטרנט אפייני כולל אמצעים לניווט בין הדפים השונים, ובמקרים רבים אמצעים לחיפוש תוכן ספציפי באתר.
-דפי אינטרנט מסוווגים כדפים סטטיים או דינמיים:
-* עמודים סטטיים לא משנים את תוכנם או את המבנה שלהם כאשר המשתמש גולש בהם, אלא אם כן מישהו ([[מנהל אתר אינטרנט]] או [[מתכנת]]) מעדכן באופן ידני את הדף.
-* עמודים דינמיים מתאימים את התוכן או את המראה שלהם לפי הקלט אותו הם מקבלים ממשתמש הקצה או לפי אינטראקציה או שינויים אשר מתרחשים במחשב עצמו (המשתמש, הזמן, שינויים במאגר הנתונים, וכו'). תוכן יכול להשתנות בצד של מחשב הלקוח (המחשב של משתמש הקצה) באמצעות שימוש ב[[שפת תסריט|שפות תסריט]] ([[JavaScript]], [[ActionScript]]}, וכו'). על מנת לעדכן באופן דינמי את תוכן ה[[Document Object Model|DOM]] (ב[[Dynamic HTML|DHTML]]. תוכן דינמי לעתים קרובות עובר קומפילציה בצד השרת באמצעות שפות סקריפט מבוססת שרת ([[Coldfusion]], [[ASP]], [[JSP]], [[Perl]], [[PHP]], [[Python]], וכו'). שתי הגישות לרוב משתמשות באפליקציות מורכבות.
+דפי אינטרנט מסוווגים כדפים סטטיים או דינמיים:
-כאשר בניית אתר האינטרנט מסתיימת, יש לפרסמו או להעלותו כדי שהוא יהיה זמין לצפייה לכלל ציבור הגולשים ברשת האינטרנט. פעולה זו נעשית לרוב באמצעות תוכנת [[File Transfer Protocol|FTP]], ולאחר שהדף פורסם, [[מנהל אתר אינטרנט|מנהל אתר האינטרנט]] יכול להשתמש במגוון של טכניקות כדי להגדיל את התנועה באתר או הכניסות אל האתר. זה יכול לכלול רישום של אתר האינטרנט במנוע חיפוש כמו [[גוגל]] או [[יאהו]], החלפת קישורים עם אתרי אינטרנט אחרים וכו'.
+* עמודים סטטיים הם למעשה קבצים שמאוכסנים בשרת, ונשלחים אל הגולשים כמו שהם.
+* עמודים דינמיים מיוצרים על ידי השרת, בדרך כלל לפי מידע משתנה שמאוחסן ב[[בסיס נתונים]] או בקבצים שאינם בצורת דפי HTML בעצמם. שרת האינטרנט גם יכול לייצר את הדפים בעזרת מידע שהוא מושך דרך הרשת ממקורות אחרים. בדרך כלל התכנה שמייצרת את הדפים כתובה בשפת תכנות המכונה "שפת צד שרת". דוגמאות לשפות כאלו הן: ([[Java]], [[ASP]], [[JSP]], [[Perl]], [[PHP]], [[Python]]).
 === דרישות רב תחומיות ===
-עיצוב אתרי אינטרנט כולל בתוכו תחומי לימוד שונים, בהם - [[מערכת מידע|מערכות מידע]], [[טכנולוגיית המידע|טכנולוגיות מידע]] ו[[עיצוב תקשורת חזותית]]. אתר האינטרנט הוא [[מערכת מידע]] אשר העבודה בה מתחלקת לשתיים - [[Front-end and Back-end]]. העבודות אשר מתמקדות בצד הויזאולי של האתר (כגון מבנה העמוד, [[ממשק משתמש גרפי|ממשק המשתמש]], ה[[גרפיקה]], ה[[כתיבה|טקסט]] וה[[קול|אודיו]]) נכללות תחת שם הגג "Front-end". העבודות אשר מתמקדות בצד הארגון וביעילות של קוד המקור, סקריפטים בלתי-נראים, והרכיבים של צד-השרת אשר מעבדים את פלט ה""Front-end" נכללות תחת שם הגג "Back-end". בהתאם לגודל של פרויקט פיתוח רשתות, לעתים העבודה כולה על עיצוב האתר אף תתנהל על ידי אדם יחיד בעל כישורים רבים (אשר יכונה לעתים [[מנהל אתר אינטרנט]] או "ובמאסטר"), ולעתים מנהל פרויקטים ינהל עיצוב משותף של קבוצת מעצבים בעלי התמחויות שונות.
+עיצוב אתרי אינטרנט כולל דיסציפלינות שונות, ובהן - [[מערכת מידע|מערכות מידע]], [[טכנולוגיית המידע|טכנולוגיות מידע]] ו[[עיצוב תקשורת חזותית]]. נהוג להפריד את העבודה על אתר אינטרנט ל-Front-endול-Back-end. העבודות שמתמקדות בצד הויזאולי של האתר (כגון מבנה העמוד, [[ממשק משתמש גרפי|ממשק המשתמש]], ה[[גרפיקה]], וה[[קול|אודיו]]) נכללות תחת שם הגג "Front-end". התחום שעוסק בצד הארגון וביעילות של קוד המקור, סקריפטים בלתי-נראים, והרכיבים של צד-השרת אשר מעבדים את פלט ה""Front-end" נכללות תחת שם הגג "Back-end". בהתאם לגודל של פרויקט פיתוח רשתות, לעתים העבודה כולה על עיצוב האתר אף תתנהל על ידי אדם יחיד בעל כישורים רבים (אשר יכונה לעתים [[מנהל אתר אינטרנט]] או "ובמאסטר"), ולעתים מנהל פרויקטים ינהל עיצוב משותף של קבוצת מעצבים בעלי התמחויות שונות.
 ==נושאים רלוונטיים==