(b) OS Lisa from Apple:
Apple Lisa Infomercial (1983)
(c) Additional clip with amazing GFX system (this was made in 60s!):
Ivan Sutherland : Sketchpad Demo (2/2)
ממשקים ראסטריים (מפוקסלים) ← ממשקים וקטוריים
ממשקים גראפיים מציידים בפקדים ש"מציירים" על גבי המסך. בעידן מונעי GDI פקדים אלו הוצגו כתמונות מפת סיביות (bitmap images), חלק מהפקדים עיצבו בתוכנות גראפיקה כתמונות ושולבו בממשקים (חלק מהן נקראו אייקונים - צלמיות); חלק מהפקדים הגיעו עם סט של ערכות פיתוח כמו MFC, Swing או .Net סט תקני של פקדים מכיל פקדים כמו: תיבות טקסט, תיבות קומבו (תיבות עם תפריט אופציות שנפתח מתוכן), תפריטים נגללים, טפסים, כפתורי לחיצה ועוד. כל הפקדים האלה היו "מצוירים" כתמונות מפוקסלות שלהן יש חיסרון איכותי בעת שינוי גודל הממשק (zooming and resizing) או בעת שינוי תבנית הטופס (layout change), בהגדלת הפקד ניתן היה להבחין בפיקסלים שגדלו והתעוותו.
עם הופעת טכנולוגיות חדשות כמו WPF הגיעו טכניקות רינדור חדשות של פקדי הממשק. שימוש בגראפיקה וקטורית אפשר לבנות פקדים שאיכות לא נפגמת בעת שינוי התכונות כמו גודל.
תמונת מפת סיביות (תמונת ראסטר)
מתוך ויקיפדיה:
בגרפיקה ממוחשבת, תמונת מפת סיביות היא תמונה דיגיטאלית שמתוארת באמצעות מפת סיביות (Bitmap), כלומר לכל פיקסל בתמונה יש ערך מספרי שמכיל בתוכו מידע על הצבע שלה. איכות התמונה נקבעת עפ"י מספר פרמטרים:
- עומק הצבע: כמות הסיביות לכל נקודה. סיבית - של 4 סיביות - 16 צבעים, 16 סיביות - 256 צבעים, וכן הלאה לפי הכלל של 2 בחזקת מספר הסיביות.
- רזולוציה: כמות הפיקסלים שיש בתמונה.

גראפיקה וקטורית
מתוך ויקיפדיה:
גרפיקה וקטורית היא שיטה לתיאור תמונה דיגיטאלית באמצעות וקטורים, המשמשת בגרפיקה ממוחשבת.
בטכניקה הנפוצה יותר לתיאור תמונה באופן דיגיטאלי, תמונת מפת סיביות, הרישום נעשה באמצעות סקלרים, המייצגים ערך בנקודה מסוימת, ואילו הווקטור מייצג גם כיוון.
ציור של קו, למשל, יוצג בצורת רצף נקודות או כווקטור בגודל של 10 יחידות (פיקסל, ס"מ, אינטש, מ"מ) שפונה לכיוון 35 מעלות ימינה.
ניתן גם להגדיר בצורה שבה הווקטור מיוצג על ידי נקודת התחלה וסיום וזו הצורה שבה באמת מוגדר הווקטור במחשב.
וקטור תמיד יוצג עם שני ערכים להגדרתו המתמטית ועוד מספר ערכים להגדרתו הגראפית במחשב כמו מיקום, צבע, מילוי ועוד, תלוי בתוכנה אשר משתמשים בה.
איורים בגרפיקה וקטורית מורכבים מצורות בסיסיות שבהן המחשב מסוגל לטפל כמו נקודה, קו, אליפסה וקשת. התיאור של כל מרכיבים התמונה נשמר בזיכרון המחשב.
כאשר מעוניינים להציג תמונה על המסך או להדפיס אותה, המחשב מבצע תהליך "רינדור" (מהמלה האנגלית Rendering) היוצר תמונת מפת סיביות בהפרדה הנדרשת מתוך האיור הווקטורי.
יתרונה העיקרי של גרפיקה וקטורית הוא ביכולת לשנות את ממדי התמונה (להרחיב אותה או לכווץ אותה) בלא כל פגיעה באיכות התמונה שלא כמו תמונת מפת סיביות. כמו-כן, כאשר מדובר באיורים יחסית פשוטים, נפח האחסון הנדרש בייצוג וקטורי הוא קטן משמעותית לעומת מפת סיביות.
ממשקים דו-ממדיים ← ממשקים תלת-ממדיים
יחד עם ההתפתחות של מנועי תלת-ממד, שעיקר שימושם היה במשחקי מחשב, תוכנות תעשייה וסימולציה, החלו להתפתח ממשקים חדשים. מתחילת שנות התשעים נעשה ניסיון לפתח ממשק מערכת הפעלה בעל יכולות תצוגה תלת-ממדיות, עם אפקטים חזותיים ועם פקדים חדשים, רק לאחרונה נבנו ממשקים ברמה מסחרית, ממשקים אלה עושים שימוש במנועי תלת-ממד כמו OpenGL ו-Direct3D. ממשק תלת-ממדי נותנים חוויית שימוש מיוחדת ומביא קונספט חדש לעולם של ממשקי מערכות הפעלה חלונאיות (כמו MS Windows ו-Mac OS). אפקטים חזותיים כמו סיבוב חלונות בצירים X, Y ו-Z נותנים אפשרות לסדר שולחן עבודה בצורה שנוחה למשתמש. כל יתרונות הממשק התלת-ממדי עדיין לא כ"כ ברורים, אך לפי דעתי, בעתיד הקרוב נמצא שימושים נוספים לתכונותיו החדשים.
אחד הגורמים המשמעותיים שתורמים לפיתוח ממשקי משתמש חדשים הנו קולנוע (בייחוד סרטים עתידניים מהוליבוד). בחלק מן הסרטים ניתן לראות ממשקי משתמש שלא נפגוש בחיי היומיום, למעשה אלה אנימציות גראפיות שנבנו עבור אותם הסרטים, כיום ניתן לראות את ההשפעה שלהם על פיתוח הממשק העתידי.
מתוך ספר: "Windows Presentation Foundation Unleashed" של אדם נתן:
In movies and on TV, the main characters are typically exaggerations of the people you encounter in real life .They’re more attractive, they react quicker, and they somehow always know exactly what to do. The same could be said about the software they use. This first struck me back in 1994 when watching the movie Disclosure, starring Michael Douglas, Demi Moore, and an email program that looks nothing like Microsoft Outlook! Throughout the movie, we’re treated to various visual features of the program: a spinning three-dimensional “e,” messages that unfold when you open them and crumple when you delete them, hints of inking support, and slick animations when you print messages. (The email program isn’t even the most unrealistic software in the movie. I’ll just say “virtual reality database” and leave it at that).
Usability issues aside, Hollywood has been telling us for a long time that software in the real world isn’t as compelling as it should be. You can probably think of several examples on your own of TV shows and movies with comically unrealistic software. But real-world software is starting to catch up to Hollywood’s standards! You can already see it in traditional operating systems (such as Mac OS and more recently Windows Vista), in software for devices such as "TiVo" or "Xbox", and on the Web thanks to Adobe Flash. Users have increasing expectations for the experience of using software, and companies are spending a great deal of time and money on user interfaces that differentiate themselves from the competition.
דו-ממד
מתוך ויקיפדיה:
באנימציה ממוחשבת דו ממדית שיטת העבודה דומה יותר לאנימציה קלאסית דו ממדית. כמו באנימציה קלאסית, גם בזו הממוחשבת עובדים באמצעות שכבות המונחות זו על גבי זו כדי ליצור את התוצאה הסופית. בניגוד לאנימציה קלאסית, כאן משתמש האנימטור בחומרים שאינם בהכרח פיזיים, אלא לרוב דיגיטאליים. אנימציה קלאסית דו ממדית (נקראת לעתים Compositing - הרכבת שכבות) משמשת באופן נרחב בתעשיית הסרטים והטלוויזיה. כמעט כל סרט המוצג היום (החל במעברונים קצרים בטלוויזיה וכלה בסרטים באורך מלא) עובר בשלב זה או אחר עיבוד, תוספות ותיקונים במערכת אנימציה דו ממדית ממוחשבת.
תלת-ממד
מתוך ויקיפדיה:
גרפיקת תלת ממד הוא תחום של אמנות גראפית ממוחשבת, שבו משתמשים במחשבים ותוכנות תלת ממד מיוחדות כדי ליצור תמונות ואנימציה ממוחשבת בעלות פרספקטיבה המחקה מראה תלת ממדי. במונח משתמשים גם לתיאור התהליך שבעזרתו יוצרים תמונות כאלה וגם לתחום שבו מפתחים כלי תוכנה וחומרה המיועדים לכך.
הדמות "שטן" מסדרת הטלוויזיה סאות' פארק בגרפיקת תלת ממד שנכתבה בעזרת OpenGL. 
גרפיקה תלת-ממדית שונה מגרפיקה דו-ממדית בכך שבזיכרון המחשב מוחזק ייצוג של אובייקטים תלת ממדיים, שהתוכנה מחשבת בכל זמן נתון כיצד ייראו על מסך המחשב (הדו ממדי). השימוש הנפוץ ביותר בגרפיקת תלת ממד הוא במשחקי מחשב (כגון Doom), בסרטי אנימציה ממוחשבת (כגון "מפלצות בע"מ") ובסרטים שבהם משלבים בסרט מצולם אלמנטים ממוחשבים (כגון הדינוזאורים בסרט "פארק היורה"). קיימות גם תוכנות ייעודיות מסוימות לתחומים קרובים אחרים, למשל תוכנות אדריכלות המאפשרות לבנות דגם ממוחשב של מבנה ולצפות בו מנקודות-תצפית שונות. אחת היכולות החשובות של גרפיקת תלת ממד הוא חישוב התאורה והצל. שינוי מראה העצמים ביחס לשינוי במרחק ביניהם לבין מקור התאורה, משפיע רבות על האמינות של התמונה הנוצרת.
הגרפיקה התלת-ממדית הייתה אחת ההתפתחויות החשובות ביותר בתעשיית משחקי המחשב ומשחקי הקונסולה. במשחקים הדו-ממדיים יכולת השחקן הייתה מוגבלת ולכן התנועה במשחק התאפשרה בשמונה כיוונים עיקריים: למעלה, למטה, ימינה, שמאלה והאלכסונים שביניהם. מאחר שהתנועה הייתה במישור, קשה מאוד היה ליצור במשחק תחושה מציאותית של עומק. כאשר פותחו מנועי התלת-ממד הפכו המשחקים למציאותיים יותר ולכן התנועה הפכה אפשרית בכל 26 הכיוונים האפשריים (כגון משחק המחשב "דיסנט").
תוכניות טלוויזיה מסוימות מאפשרות לצפות בשידוריהן בתלת מימד כגימיק, אך הדבר דורש מהצופים להצטייד במשקפי תלת מימד לשם כך.
התפתחות הטכנולוגיה:
גרפיקה תלת-ממדית דורשת משאבי מעבד וזיכרון רבים, ולכן משחקי התלת ממד הראשונים היוו חיקוי של הסביבה התלת ממדית. לדוגמה, משחק בו לשחקן הייתה יכולת תנועה מישורית בחיקוי של סביבה תלת-ממדית, ואת היכולת לעלות למישורים גבוהים או נמוכים יותר באמצעות מעליות או מדרגות.
באמצע שנות ה-90 של המאה ה-20 הפכו יישומי התלת ממד לנפוצים ותובעניים יותר ככל שסימולציית המציאות שלהם השתפרה, דבר שהביא חברות חומרה (כגון NVIDIA) לפתח כרטיסי מסך למחשבים ביתיים במטרה להוריד את עומס החישוב והזיכרון מהמעבד הראשי אל כרטיס המסך.
אנימציה ממוחשבת תלת ממדית היא זו שבה עיצוב הדימויים נעשה באמצעות תוכנות המדמות מבנה של גופים במרחב תלת ממדי. תהליך יצירת הדימוי הוויזואלי כולל יצירת מודל ממוחשב של הגוף אותו רוצים להציג, ותהליך נוסף המכונה Render. בתהליך זה יוצר המחשב (על פי מערכת חוקים סבוכה למדי) תמונה מתוך המודל, באמצעות שימוש בפרמטרים כגון זווית המצלמה, התאורה, מירקם המשטחים ועוד.
דוגמה: צעצוע של סיפור - סרט האנימציה הממוחשבת הראשון באורך מלא בו נעשה שימוש בטכניקות עבודה בתלת ממד. בסרט זה נעשה שימוש ב-117 מחשבים נפרדים (פועלים במקביל) שכללו 294 מעבדים לצורך פעולת ה-Render. פעולה זו ארכה, בחישוב כולל, כ-800,000 שעות (יותר מ-91 שנים אם זה היה נעשה במחשב אחד בלבד).
ממשקי מולטימדיה ← ממשקים אינטראקטיביים
מתחילת שנות התשעים של המאה העשרים מחשבים החלו לקבל תכונות של מערכות הבידור, פותחו התקנים המסוגלים לנגן מדיות שונות, כמו: אודיו, תמונה ווידאו. החלה התפתחות של תחום המולטימדיה, בין המובילות בתחום הייתה חברת אפל עם מספר גרסאות של מערכות הפעלה שנועדו לשוק המקצוע שעסק בעריכת גראפיקה, אודיו ווידאו. החל מ-1995 מיקרוסופט נכנסה לתמונה (עם מערכת הפעלה MS Windows 95). מאז מחשבים הובילו מהפכה בתחום הבידור והיום ניתן לראות שהתקני הבידור בסלון יותר ויותר דומים למחשבים.
החל מאמצע שנות התשעים הופיע מושג אינטראקטיביות (ראו פירוש בהמשך), בשילוב עם יכולות המולטימדיה של המחשב והתקנים חדישים משתמשים קיבלו מערכת שמסוגלת לפעולה הדדית עימם. מחשב מגיב בצורה אינטראקטיבית לפקודות האדם ונוצר קשר ייחודי ומלהיב בין האדם והמכונה.
מולטימדיה
מתוך ויקיפדיה:
מולטי-מדיה, מולטי הוא ריבוי ו-מדיה בהקשר זה הוא אמצעי לאחסון מידע.
המושג מולטימדיה פירושו היכולת לנהל ולהפעיל מספר סוגים של מדיה בסביבה תפעולית ממוחשבת אחת.
בעוד שבעבר אמצעי האחסנה העיקרי של מידע היה טקסטואלי, כיום ניתן לשלב מגוון רחב של יכולות גראפיות, ויזואליות, קוליות ואחרות.
מדיות מטכנולוגיות שונות דורשות לרוב שמירת המידע בקבצים בעלי מבנה (פורמט) פנימי ייחודי. לדוגמה, קובצי doc של תוכנת Word, או קובצי html המשמשים לתצוגה בדפדפן.
סוגים נפוצים של קובצי מולטימדיה הינם טקסט המכילים מידע טקסטואלי פשוט או עשיר (RTF, מצגות, גיליונות אלקטרוניים, קובצי גרפיקה, אנימציה תמונות, ו-קול).
הפעלת המדיות במחשב דורשות משאבים רבים כמו זיכרון-מחשב (RAM) גדול ועוצמה חזקה של המעבד (CPU).
השימושים הנפוצים במולטימדיה הינם משחקי מחשב, מצגות, כלי הדרכה ממוחשבת - ופרסום ממוחשב.
מולטימדיה כשילוב בין סוגי תוכן:
אינטראקטיביות
מושג זה נמצא בשימוש בתחום מערכות מידע, תקשורת ועיצוב תעשייתי; מתאר אופן האינטראקציה (פעולה הדדית) בין ישויות.
מבחינת האינטראקטיביות ניתן לציין נקודות אינטראקציה הבאות:
- פעולה ליניארית, כאשר ההודעה הנשלחת (או מוצגת) אינה קשורה להודעות הקודמות
- פעולה כתגובה, כאשר ההודעה קשורה באופן מיידי להודעה הקודמת בלבד
- פעולה אינטראקטיבית (דו-שיח או הדדיות), כאשר ההודעה עם מספר של הודעות קודמות ועם קשרים (או יחסים) ביניהם
לרוב ניתן לתת הגדרה ש"אינטראקטיביות" הנו מדד ליחס הדדי בין מסרים, הכוונה שמסר נוכחי מושפע מהמסר הקודם. למשל: הזזת העכבר של המחשב באופן פיזי גורמת להזזת סמן העכבר על מסך המחשב, קיימת אינטראקציה בין מחשב למשתמש, יש ביניהם פעולה הדדית.
אינטראקטיביות במערכות מחשב
במערכות מחשב מסורתיות האינטראקציה מוגבלת ע"י תהליך השידור, אשר מושפע מהכנסת שינויים בהתאם לתיקון. למשל: אם ידוע לנו שיש השהיה כלשהי בביצוע פעולה כלשהי במחשב (כמו שליטה מרחוק על שולחן העבודה במחשב אחר - Remote Desktop), אז לחיצה על אזור מסוים במסוף שאליו "מצויר" שולחן עבודה מרוחק מגיעה כעבור זמן מסוים אל המחשב היעד, משתמש מבחין בהשהיה ומבצע פעולותיו בהתאם (מאט קצב העבודה או ממשיך בביצוע פעולות בציפייה שכל השלבים - כמו לחיצות יבוצעו אחד אחרי השני עם השהיה). לו היה לנו מסוף אינטראקטיבי "מושלם" אז בו היו מבוצעים חישובים בהתאם להשהיה בפועל, הוא היה מדמה תגובה מיידית עם לחיצת העכבר והיה מבצע תיקונים בהתאם לתגובה האמיתית של מחשב מרוחק.
לרמות האינטראקטיביות ניתן לתת מספר דוגמאות מתחום האנימציה:
- דוגמא פשוטה: ניגון האנימציה ע"י לחיצה על האזור ה"חם", תכונה זו בעיקר בשימוש בנגני מדיה ומחשקים
- המודל הפיזי של האובייקט: אנימציה מורכבת, מערכת מאפשרת לשנות פרמטרים מסוימים של גוף תלת-ממדי ומציגה באופן מיידי את השינויים. למשל: בתוכנת עיצוב תלת-ממדי ניתן לסובב קוביה ע"י תנועת העכבר, המשתמש רואה שקובייה מסתובבת תוך כדי הזזת העכבר, נוצרת תחושת תנועה בזמן אמת (Real-time motion).
לאחרונה הופיעו מספר מערכות עם יכולות אינטראקטיביות ברמה גבוה, כגון: תוכנות אינטראקטיביות שנעזרות במסכי רב-מגע (לינק עם דוגמא: http://www.perceptivepixel.com/), תוכנות לזיהוי תמונה - זיהוי פנים של בני-אדם (לינק עם דוגמא: www.betaface.com).
התפתחות בשיטות תכנות ושיטות תצוגה:
::: פיתוח מודולארי ← פיתוח מונחה עצמים
::: פיתוח מונחה עצמים ← פיתוח מונחה אספקטים
::: ממשקים טקסטואליים ← ממשקים גראפיים
::: ממשקים ראסטריים (מפוקסלים) ← ממשקים וקטוריים
::: ממשקים דו-ממדיים ← ממשקים תלת-ממדיים
::: ממשקי מולטימדיה ← ממשקים אינטראקטיביים
PS
בהתבסס על המחקר הקטן שעשיתי במהלך ההכנות של הסדרה, אני יכול לומר ש"אין חדש תחת השמש", ז"א רוב הדברים בתחום המחשב שנראים חדשניים (עת "סטיילוס" למשל) כבר הומצאו בשנות ה-60/70. תעשיית הביטחון של ארה"ב וגופי מחקר נוספים הביאו לנו המון חידושים וקידמה ומה שנעשה אח"כ - אלו וריאציות שונות שלהם...
ראו בהמשך פוסט על "מבוא למתודולוגיה בפיתוח ממשקי משתמש - שיטות בהנדסת תוכנה: פיתוח תוכנה במודל השכבות", אשמח לקבל הערות/תיקונים לגבי הפוסט. לרשימת הפוסטים של הסדרה לחצו כאן.