UI – פוסט 8: מבוא למתודולוגיה בפיתוח ממשקי משתמש

7 בפברואר 2008

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






עבר מול הווה


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

אציין מספר תחומים שבהם חל שינוי תפיסתי בשנים האחרונות:


(לפני שאכנס לנושא הממשקים אני רוצה לתת סקירה קצרה על ההתפתחות בשיטות הפיתוח/תכנות)



תכנות מודולארי ← תכנות מונחה עצמים

בעשרים שנים האחרונות חל מעבר משיטת פיתוח פרוצדוראלית (מודולארית) לשיטת פיתוח בתכנות מונחה עצמים; לשיטה האחרונה יתרונות בולטים על פני הראשונה.

legos



תכנות מודולארי



מתודולוגיה לפיתוח תוכנה, שהמימוש שלה החל בתחילת שנות השישים, בשפות תכנות כדוגמת ALGOL ו-PL/I ונמשך לאחר מכן בשפות התכנות C ו־Pascal. היא הייתה התפתחות של שיטות הקידוד שקדמו לה, שבהן תוכנית מחשב (למשל בשפת קובול) הייתה כתובה כמקשה אחת, כאשר כל המשתנים פתוחים לכל חלקי הקוד, ובקרת הזרימה נעשתה בעיקר באמצעות פקודת go to.


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


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


פרוצדורות יכולות להכיל תת-פרוצדורות כדי להמשיך ולשפר את קריאות (readability) התוכנה ושבירתה לחלקים לוגיים ברורים. מצב שבו פרוצדורה נמצאת בתוך פרוצדורה אחרת וכך הלאה נקרא קינון (nesting).


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



תיאור מופשט:


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


lego_playing



תכנות מונחה עצמים


מתוך :


תכנות מונחה עצמים או לעיתים תכנות מוכוון עצמים (באנגלית: Object-Oriented Programming, או בקיצור OOP) – פרדיגמה תכנותית המשתמשת ב-"עצמים" לשם תכנון תוכניות מחשב ויישומים. הפרדיגמה מבוססת על מספר טכניקות ובהן הורשה, מודולאריות, פולימורפיזם וככמוס. טכניקות אלה שימשו בפיתוח תוכנה החל מתחילת שנות ה-80 ואילך, אך השימוש בפרדיגמה בשלמותה החל רק בשנות ה-90. רוב שפות התכנות המודרניות תומכות בתכנות מונחה עצמים.


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


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


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


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


תיאור מופשט:


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


תכנות מונחה עצמים ← תכנות מונחה אספקטים


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


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


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


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


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


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







ממשקים טקסטואליים← ממשקים גראפיים


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


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


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


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



dos1x


ממשק טקסטואלי


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


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



מערכות הפעלה טקסטואליות (עם מסך מחשב – "oscilloscope") הראשונות:



(a) First textual UI with mouse, keyboard, computer screen, copy, cut, paste features, code compiler and other new features (this was really revolution in 1968!):








(b) Who said that "Stylus" pen is a new idea?:









(c) See additional demos here: http://www.youtube.com/profile_videos?user=bigkif&p=r, presenters look cool for their time, take a look on TV effects too 🙂






windows1.0 ממשק גראפי The Xerox Star


מתוך :


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


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


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


היסטוריה של ממשקי משתמש גראפיים:
apple_mac_system1


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


– 1980 תחנת עבודה גראפית "פרק" (Perq) של חברת Three Rivers Computer Corporation יוצאת לשוק.


– 1981 מעבדות זירוקס מפתחות את ממשק סטאר למחשב אלטו, שימוש בקליק כפול להפעלת איקון.


– 1983 מחשב "ליזה" של אפל יוצא לשוק, החידוש – תפריטים נגללים.


– 1983 חברת ויזי מוציאה את ויזי און (Visi On) סביבת העבודה הגראפית המוכללת הראשונה.


– 1984 המקינטוש הראשון יוצא לדרך


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


תיאור מופשט:


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



מערכות הפעלה גראפיות הראשונות:



(a) XEROX OS "Star" for typography:








(b) OS Lisa from Apple:










(c) Additional clip with amazing GFX system (this was made in 60s!):









ממשקים ראסטריים (מפוקסלים) ← ממשקים וקטוריים


ממשקים גראפיים מציידים בפקדים ש"מציירים" על גבי המסך. בעידן מונעי GDI פקדים אלו הוצגו כתמונות מפת סיביות (bitmap images), חלק מהפקדים עיצבו בתוכנות גראפיקה כתמונות ושולבו בממשקים (חלק מהן נקראו אייקונים – צלמיות); חלק מהפקדים הגיעו עם סט של ערכות פיתוח כמו MFC, Swing או .Net סט תקני של פקדים מכיל פקדים כמו: תיבות טקסט, תיבות קומבו (תיבות עם תפריט אופציות שנפתח מתוכן), תפריטים נגללים, טפסים, כפתורי לחיצה ועוד. כל הפקדים האלה היו "מצוירים" כתמונות מפוקסלות שלהן יש חיסרון איכותי בעת שינוי גודל הממשק (zooming and resizing) או בעת שינוי תבנית הטופס (layout change), בהגדלת הפקד ניתן היה להבחין בפיקסלים שגדלו והתעוותו.


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


 


bee_bmp




תמונת מפת סיביות (תמונת ראסטר)


מתוך :


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


– עומק הצבע: כמות הסיביות לכל נקודה. סיבית – של 4 סיביות – 16 צבעים, 16 סיביות – 256 צבעים, וכן הלאה לפי הכלל של 2 בחזקת מספר הסיביות.


– רזולוציה: כמות הפיקסלים שיש בתמונה.


 



bee_vector


 


גראפיקה וקטורית

מתוך :


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


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


ציור של קו, למשל, יוצג בצורת רצף נקודות או כווקטור בגודל של 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.

 


דו-ממד3d_view_house


מתוך ויקיפדיה:


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


תלת-ממד


מתוך ויקיפדיה:


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


הדמות "שטן" מסדרת הטלוויזיה סאות' פארק בגרפיקת תלת ממד שנכתבה בעזרת OpenGL. 3d_view_pane


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


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


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


התפתחות הטכנולוגיה:


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


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


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


 דוגמה: צעצוע של סיפור – סרט האנימציה הממוחשבת הראשון באורך מלא בו נעשה שימוש בטכניקות עבודה בתלת ממד. בסרט זה נעשה שימוש ב-117 מחשבים נפרדים (פועלים במקביל) שכללו 294 מעבדים לצורך פעולת ה-Render. פעולה זו ארכה, בחישוב כולל, כ-800,000 שעות (יותר מ-91 שנים אם זה היה נעשה במחשב אחד בלבד).


 


ממשקי מולטימדיה ← ממשקים אינטראקטיביים


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


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


מולטימדיה


מתוך ויקיפדיה:


מולטי-מדיה, מולטי הוא ריבוי ו-מדיה בהקשר זה הוא אמצעי לאחסון מידע.


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


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


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


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


 הפעלת המדיות במחשב דורשות משאבים רבים כמו זיכרון-מחשב (RAM) גדול ועוצמה חזקה של המעבד (CPU).


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




מולטימדיה כשילוב בין סוגי תוכן:


multimedia



אינטראקטיביות

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


מבחינת האינטראקטיביות ניתן לציין נקודות אינטראקציה הבאות:


– פעולה ליניארית, כאשר ההודעה הנשלחת (או מוצגת) אינה קשורה להודעות הקודמות


– פעולה כתגובה, כאשר ההודעה קשורה באופן מיידי להודעה הקודמת בלבד


– פעולה אינטראקטיבית (דו-שיח או הדדיות), כאשר ההודעה עם מספר של הודעות קודמות ועם קשרים (או יחסים) ביניהם


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



אינטראקטיביות במערכות מחשב

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


לרמות האינטראקטיביות ניתן לתת מספר דוגמאות מתחום האנימציה:


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


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


לאחרונה הופיעו מספר מערכות עם יכולות אינטראקטיביות ברמה גבוה, כגון: תוכנות אינטראקטיביות שנעזרות במסכי רב-מגע (לינק עם דוגמא: http://www.perceptivepixel.com/), תוכנות לזיהוי תמונה – זיהוי פנים של בני-אדם (לינק עם דוגמא: www.betaface.com).



התפתחות בשיטות תכנות ושיטות תצוגה:

::: פיתוח מודולארי פיתוח מונחה עצמים


::: פיתוח מונחה עצמים פיתוח מונחה אספקטים



::: ממשקים טקסטואליים ממשקים גראפיים


::: ממשקים ראסטריים (מפוקסלים) ממשקים וקטוריים



::: ממשקים דו-ממדיים ממשקים תלת-ממדיים


::: ממשקי מולטימדיה ממשקים אינטראקטיביים



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



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


Add comment
facebook linkedin twitter email

Leave a Reply to Moshe L Cancel Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

4 comments

  1. Moshe L8 בפברואר 2008 ב 12:26

    מחכים.
    נהנתי !

    Reply
  2. שניר דוד8 בפברואר 2008 ב 15:21

    וואו! פוסט מדהים! המון המון תודה..

    Reply
  3. דניאל10 בפברואר 2008 ב 12:22

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

    Reply
  4. Maxim10 בפברואר 2008 ב 23:32

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

    Reply