יום שני, 28 ביולי 2008

עיצוב אתרים לוקה בחסר

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

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

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

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

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

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



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

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

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

הגרסה האפורה (מומלצת)

הורדת העיצוב: עידכון העיצוב של אתר Gamer.

הגרסה הבהירה

הורדת העיצוב: #2 עידכון העיצוב של אתר Gamer.


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

יום שישי, 25 ביולי 2008

עיצוב אתרים - באמת איך מתייחסים לדבר הזה?

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

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

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

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

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

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

במילים אחרות: אל תגרמו לגולש לאמץ עת העיניים בשום שלב!

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

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

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

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

אלו היו כמה נקודות למחשבה אודות עיצובים, ועכשיו מאמר הקשור אף הוא לעיצוב, ואני ממליץ לקריאה:
עיצוב אתרים - כיצד להתמודד עם עיצוב טוב.

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

יום שני, 21 ביולי 2008

איך מתחילים HTML

הרבה אנשים שניגשים להתחלה של השפה, לא באמת יודעים איך להתחיל איתה, איפה לומדים אותה ואיך אמורים להשתמש.
במהלך המדריך הבא אני הולך לעבור על ההתחלה של שפת התגיות HTML.

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

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

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

פרוייקט איתן
נתקלתי בו ממש לא מזמן, אישית לא אהבתי את האתר עצמו, האתר לא נוח לדעתי לשימוש והקוד בו לא תקין, אבל אם ל-W3C וויתרנו על לפרוייקט איתן לא נוותר?
בכל מקרה החוסר נוחות באתר, התפריט לא תפריט והעיצוב הבסיסי מאוד מקשים על הלמידה.
דרך אגב, אני מתכוון ל-2 הפרוייקטים שלהם בנוגע ל-HTML, וחבל שיש שמה חוסר השקעה כזה ב-HTML, כי בפרוייקטים אחרים הם עשו עבודה מדהימה.
(לינק: HTML1) (לינק: HTML2)


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

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

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

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

בהצלחה למתחילים, והמשך גלישה נעימה.