DCSIMG
February 2008 - Posts - Maxim

February 2008 - Posts

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

במהלך המפגש שאלו את דעתנו על עיצוב חולצות הבלוגרים של מיקרוסופט-ישראל ורוב בחרו בחולצה עם הסיסמא הסקסית "give me a blog job", אם זכרתי נכון. החלטתי להציע עיצובים נוספים. עשיתי 10 סקיצות עיצוב לחולצות ויכול להיות שמשהו יוכל להתאים.

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

1 2
 i blogger version 2  i blogger version 1

3

4
blog and roll blog me

5

6
blog killer my blog in ms blogs

7

8
geek ed 2008 geeks coming

9

10
click me hit me

 



 

את ההשראה קיבלתי מחולצות האלה:

03 02 01
06 05 04
09 08 07
12 11 10
15 14 13
18 17 16
21 20 19
  22  


מקווה שמשהו יכול להתאים ;-)

If .Net project contains embedded resources, we can extract them at run-time (for internal-in-program usage or to save as files). Embedded resource can be attached file of any type (popular types: texts, images, sounds).

For example, .Net project contains embedded "License Agreement" text file:

embeded resource1

File properties:

embeded resource2

This code shows how to load embedded text file into string "license":


public
void ExtractResources()
{

Stream sin = Assembly.GetExecutingAssembly().GetManifestResourceStream("SegevSystems.Setup.Files.LICENSE AGREEMENT.TXT");
StreamReader
r = new StreamReader(sin);

string license = r.ReadToEnd();

r.Close();
r.Dispose();

sin.Close();
sin.Dispose();

}

// "SegevSystems.Setup.Files" represents namespace where resources are located

This code shows how to save all embedded resources into files:

public void ExtractResources()
{

try
{

Assembly a = Assembly.GetExecutingAssembly();
string
[] contents = a.GetManifestResourceNames();

for (int i = 0; i < contents.Length; i++)
{

using (Stream s = a.GetManifestResourceStream(contents[i]))
{

using (BufferedStream b = new BufferedStream(s))
{

string filePath = string.Format("c:\\temp\\{0}", contents[i].Replace("SegevSystems.Setup.Files.", string.Empty));

if (File.Exists(filePath)) File.Delete(filePath);

using (FileStream f = new FileStream(filePath, FileMode.CreateNew))
{

int _res;
while
((_res = b.ReadByte()) >= 0)
{

f.WriteByte((byte) _res);

}
f.Close();

}
b.Close();

}
s.Close();

}

}

}
catch (Exception ex)
{

Debug.WriteLine(string.Format("Error while resource read/write: {0}", ex.Message));

}

}

Hope that this post was helpful :)

Posted by Maxim | with no comments

 
1. I'm glad and happy for MS invitation to Tech-Ed 2008.

2. If every company will have (hire) managers like Steve Ballmer it will be like Microsoft.

3. Have a nice weekend :)

 

 

Posted by Maxim | with no comments

 

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


פיתוח תוכנה במודל השכבות


אחת השיטות של פיתוח תוכנה שמאוד נפוצה בשנים האחרונות היא "מודל השכבות". לדוגמא: מודל OSI - שבע שכבות בתקשורת מחשבים.

מודל זה מוכר בשמות "רב שכבתי" (Multitier Architecture) או N-שכבתי (N-Tier), או תלת-שכבתי (ראו דוגמאות בהמשך).

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

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

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


צורה מקובלת לחלוקה של שכבות:

project_layers

 

מהסוף:

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

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

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

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

(בד"כ נהוג לבצע חלוקה לפי שלש שכבות 3-tier, לא כולל את השכבה התחתונה - שכבת התעבורה)

 

הערות:

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

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

- ישנם פרויקטים רבים שבהם לא ניתן להפריד את השכבות, למשל שכבת BL (Business Logic) קשה מאוד להפריד משכבת הUI (User Interface) מסיבות שונות.

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


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

סכמה מופשטת של חלוקת השכבות בפרויקט:

real_project_layers


news_arts_layers


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

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

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

כיתוב generic בחלק מן המודולים אומר שמודול זה נמצא בשימוש בפרויקטים נוספים (reusable software component).

 

יתרונות השימוש במודל השכבות:

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

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

::: תחזוקה קלה יותר ושיתוף מספר מפתחים בפרויקט אחד (למשל: כל מפתח יעבוד על פיתוח של שכבה מסוימת)

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


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

פוסט זה הנו המשך לפוסט הקודם "מבוא ל- 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!):

Douglas Engelbart : The Mother of All Demos

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

Ivan Sutherland : Sketchpad Demo (1/2)


(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:

Xerox Star Demo

(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 הגיעו טכניקות רינדור חדשות של פקדי הממשק. שימוש בגראפיקה וקטורית אפשר לבנות פקדים שאיכות לא נפגמת בעת שינוי התכונות כמו גודל.

 

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


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