יום ראשון, 17 במאי 2009

העורך האולטימטיבי

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

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

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

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

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

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



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



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



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

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



phpDesigner
למי שטועה, חזרתי אליה, ולא משום שמצאתי בה את כל מה שאני מחפש בעורך שלי, כי יש לי מתברר דרישות דיי גבוהות מהעורך, בין היתר שיבין מה אני עושה ויפעל בהתאם (לדוגמה אני נמצא בין תגיות SELECT ולוחץ אנטר, שיצור לי תגית OPTION אוטומטית עם הזחה בהתאם, או אם אני מחליף את תקן הדף, שיגיב בהתאם).
ב-phpDesigner בחרתי מהסיבה הפשוטה שנורא קל להגדיר אותו, אם זה SVN, אם זה השרת הביתי, וכל תכונה אחרת שנדרשת לצורך שימוש ב-PHP, ונכון שהוא לא מבריק מבחינת HTML, אבל השימוש בו היה הכי אנושי עבורי, ואני נהנהתי ממנו הרבה לפני שהתחלתי במסע המטורף של חיפוש עורך.



העורך המושלם
בעורך המושלם, אני רואה כמה קל להוסיף תגית HTML, אם זה תמונה או כל תגית אחרת, כאשר לחיצה על הכפתור תכניתא ת התגית, ואם יש שדות שצריך למלא זה ישאיר ריק, עד שילחצו בין המרכאות ואז זה יאפשר הוספת מידע.
כאשר אני נמצא בין תגית פתיחה וסגירה, ולוחץ אנטר, זה יוריד את תגית הסגירה 2 שורות, והסמן יעמוד בשורת האמצע ויהיה מוזח בטאב נוסף, כך שאני ישר אתחיל לעבור ולא להתעסק במיזוח נכון של התוכן.
בעורך המושלם נוח לעבוד עם PHP, אם זה להגדיר את כל הרכיבים בהם אתה משתמש בקלות המירבית, אם זה לחבר את ההגדרות לשרת הביתי, ואם זה עורך חכם שיזהה את מה שאתה עושה.
בעורך המושלם אתה משנה את תקינות הדף, וקוד ה-DTD משתנה בהתאם, וכשאתה משנה את קידוד הדף, תגית ה-META מותאמת אוטומטית.

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

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

המשך עבודה נעימה.

יום שבת, 2 במאי 2009

עיצוב אתרים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המשך עיצוב נעים.