פיתוח תוכנה – אבי צוראל – Kenso

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

זהו קישור לפוסט המקורי – Flash Media Server Statistics Using Sawmill

שלום לכולם,

אחרי הפסקה ארוכה יחסית אני חוזר עם עוד סקרינקאסט.

הפעם, אחרי מעבר למק אני מדבר על פלקס – Flex ועל ריילס – Ruby On Rails, ואיך הם משתלבות ביחד בצורה טבעית מאוד (לפחות לי).

תיהנו!

בהקלטת הסקרינקאסט הזה אני גם מכריז על קטגוריה חדשה בבלוג שלי: Ruby on Rails

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

השילוב (הטבעי) בין ריילס לפלקס from Avi Tzurel on Vimeo.

שלום לכולם,

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

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

כאשר ניגשים לבצע אתר שצריך להזרים וידאו למשתמשים צריכים לענות ראשית על כמה שאלות מרכזיות.

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

סטרימינג אמיתי או פרוגרסיב?

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

מה ההבדל?

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

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

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

Progressive – Progressive עדיין יאפשר את הצפייה בוידיאו אך הסרטון או קטע המוזיקה יורדים אל הלקוח (בו זמנית) ואז מתנגנים.
למשל, אם נלחץ על Play נתחיל בתהליך של זרימת מידע ללקוח ושמירה של הקובץ אצלו בTemporary Internet files, גם אם הלקוח ילחץ על Pause הוא ימשיך את תהליך השמירה ללא תלות בשום פעולה אחרת שלו.

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

יתרונות וחסרונות

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

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

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

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

היתרון המובהק הוא השימוש רק במה שצריכים ולא במה שלא

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

יכול להיות שהשרת שלך יהיה יעודי לWEB אבל כול הסרטונים יזרמו מEC של אמזון לדוגמא.

טכנולוגיות

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

Flash

במידה ונבחר בטכנולוגיה זו נצטרך לבצע המרה של כול הסרטונים שלנו לFLV, סרטונים של WMV או Avi לא יוכלו להיות מנוגנים על ידי Flash Player.
ניתן למצוא היום ממירים בתשלום או חינמיים.

אחד מהממירים הטובים ביותר שקיימים בשוק הוא FFMpeg שמכילה Command Line עשיר באפשרויות שאיתו ניתן לבצע Tweaking להמרה, איכות, גודל, Frame Rate ועוד.
FFMpeg אינו לשימוש מסחרי, במידה ורוצים לעשות בו שימוש מסחרי צריכים לבצע Open Source לכול מה שנוגע בחלק הזה.

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

במידה ונבחר בסטרימינג יש לנו את Adobe Flash Media Server.
תוכנה מעולה זו יכולה לשבת על שרת יעודי שלכם ולבצע Stream של וידאו, אודיו, מידע,לנהל משתמשים, Chat's ועוד ועוד.
התכנות לשרת הזה אינו אינטואיטיבי וידרוש בד"כ מתכנת מיומן עם יכולת למידה גבוהה ביותר.

לסטרימינג של פלאש אפשר למצוא גם את תוכנת קוד פתוח Red5

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

Avi, WMV ושאר ירקות

במידה ולא נרצה את המרת הוידאו, נוכל להשתמש בWindows Media Player, החיסרון המובהק הוא התאימות לדפדפנים. משתמשי פיירפוקס וספארי לא יוכלו לראות את הסרטונים שלכם (לפיירפוקס יש תוסף מיוחד).

אפשר גם לבצע Streaming על ידי מימוש פרוטוקול MMS ושימוש בWindows media streaming שבא כחלק Windows 2003.

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

שלום לכולם,

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

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

בעוד שאני מפתח בעיקר לסביבת מיקרוסופט (C#, Sql Server, .Net) בחרתי דווקא בפלקס כסביבה העיקרית שבה אני מפתח אפליקציות עשירות.

למה דווקא פלקס?

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

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

IDE – הIDE של פלקס (Flex Builder 3) הוא מדהים, יש לו עשרות רבות של Features שיכולים לעזור לנו בפיתוח, Debugging, Remote Debugging פקדים מובנים שמקלים ומריצים את זמן הפיתוח.

עיצוב – מעצבים הם כמו נשים אי אפשר איתם ואי אפשר בלעדיהם (הומור כמובן, לא להיעלב), הסביבה שבה מעצבים לפלקס היא אותה סביבה בדיוק שבה המעצב עובד (99% מהם סביר להניח) שזה בעצם Illustrator, Photoshop או כול תוכנה גרפית אחרת. המתחרה העיקרית של Flex – סילברלייט הוציאה סביבה חדשה (שמבוססת על מוצר של חברה שמייקרוסופט קנתה לפני שנים) ועדיין לא הוטמע מספיק אצל מעצבים.
להערכתי בארץ יש מספר זעום של משתמשים בתוכנה הזו ושל מעצבים שיודעים לעבוד איתה.

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

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

שרתים – אהההה, תכנות צד שרת גורם לי לחייך בכול פעם.
פלקס לא מוגבלת בטכנולוגיה – המערכת שאתם בונים יכולה לצרוך Service שנכתב בJava ובאותה מידה לצרוך אחד שנכתב בc#.
Socket – כנ”ל, יכול להיות Windows ויכול להיות Apache אין שום בעיה, אתם בפלקס לא צריכים לשנות כלום, הכול נשאר אותו דבר.

תאימות דפדפנים – צריך להרחיב? יש מישהו שאין לו Flash Player בדפדפן?
כן, אני יודע יש AdBlocker של FireFox אבל כמה באמת משתמשים בו? הרי בסופו של יום אפליקצית RIA היא חלק עיקרי בתוך אתר אינטרנט, פרסומת היא חלק משני ולכן אם אתם תפתחו אפליקציה מדהימה, אנשים ירצו לראות אותה.

השתכנעתם? יופי נמשיך…

ההתחלה

כשAdobe הציגה את פלאש MX היא הביאה לעולם לבטים גדולים לעשרות אלפי מתכנתים כמוני.
מתכנתים שרצו לאמץ את הטכנולוגיה אבל שנהיים ירוקים למראה הIDE האיום והנורא של Flash.

מתכנתים שלא רצו להתעסק עם Symbols ובמות וLayers וTimeFrame וקוד שמפוזר בכול מקום וקשה לשלוט עליו.
היו המון תלונות ואי שביעות רצון… Adobe הקשיבו…

בשנת 2004 יצא Flex 1 שהתבסס על שפת ActionScript 2.
לאחר שנתיים בלבד יצא Flex 2 שכבר התבסס על ActionScript 3 המעולה

בשנת 2008 הגיע לאוויר העולם Flex Builder 3 והיום הוא הסביבה הרשמית של Adobe לפיתוח של Flex.

השפה

flex מתכנתים ע”י שפה שמבוססת על Xml שנקראת Mxml.

כול דבר שתכתבו בMxml יתורגם מאחורי הקלעים לAs3 טהורה ומהירה.

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

צילומי מסך – IDE

הסביבה תואמת לWindows (אני אישית עבדתי איתה על כול גירסה מאז XP כולל על 7, גם בסביבת 32 וגם ב64 ביט) ולמקינטוש.

Show me the m….xml

אוקיי…

דיברנו על פלקס בכללי, דיברנו על mxml בכללי.
עכשיו קצת לקוד.

האמת שהתכנות לFlex מאוד דומה לתכנות של Asp.Net ולתכנות של .Net בכלל.

הפקדים מזכירים את הסביבה, הפקודות והכול.

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

אנחנו יכולים לשים מספר Canvas’s בתוך Canvas אחד ללא הגבלה אלא של שטח מסך

בואו ונתחיל ביצירת פרויקט חדש.

יצירת פרוייקט מתבצע באמצעות קליק ימני בחלק הלבן של החלונית “Flex Navigator” ובחירה ב New—Flex Project

קיבלנו את הדיאלוג הזה

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

עכשיו קיבלנו את האפליקציה שבאה עם כול פרויקט חדש בכחול האופייני של Flex.

פשוט ע”י Drag&Drop נגרור פקד textInput ופקד button לתוך סביבת העבודה שלנו.

ע”י החלונית המסומנת באדום ניתן להם מאפיינים.
לפקד הטקסט ניתן ID של txtUserFullName.
לכפתור ניתן ID שנקרא btnSend

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

ניתן לערוך את כול המאפיינים, כולל X,Y או כול מאפיין אחר העולה על רוחכם ונתמך ע”י פלקס (פלקס מציעה Intellisence מעולה!!!)

להלן דוגמא של איך זה נראה

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

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

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

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

היות והתוצר הסופי שלנו הוא קובץ SWF הוא יכול לרוץ בדפדפן, בואו ונראה את התוצאה הסופית שלנו.

סיכום

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

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

אתם יכולים להוריד את Flex Builder 3 לגרסת ניסיון של 30 יום מכאן

שלום לכולם,

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

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

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

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

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

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

נתחיל

תמונות

כשאני אומר כאן תמונות אני מתכוון לתגי הimg שלכם
התמונות שלכם מתחלקות בעצם לכמה קבוצות

אינפורמטיבית

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

פונקציונאלית

תמונה פונקציונאלית היא למשל "חיפוש" או "מחק" הalt צריך להיות הפעולה המדויקת שתתבצע במידה ולוחצים על התמונה

דקורטיבית

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

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

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

Captcha

במידה ויש תמונת Captcha, יש לספק לה סאונד חלופי, או אמצעי ולידציה חלופי לבעלי מוגבלויות

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

מבנה המידע

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

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

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

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

ד.א, הכותרת הזו צריכה להיות נראית לקוד, הם לא יכולים להיות בdisplay:none, וגם אל תנסו להסתיר את זה בJavascript, גם זה לא יעזור

אם אתם רוצים להסתיר את הכותרת הזו, אתם צריכים לשים עליה position:absolute; top:-999em, כך לקוד ולקוראי המסך הם יהיו גלויים אך לא יפריעו לכם לעיצוב.

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

במידה והאתר שלכם בעברית, תגדירו dir=rtl בגוף הדף שלכם, לא בCSS, חלק מקוראי המסכים לא מבינים את הגדרות הCSS או שהמשתמש בהם כיבה את הParser שלהם.

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

רשימות

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

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

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

קישוטים למיניהם: במידה ואתם רוצים לשים bullet ליד כול מילה, אל תשתמשו בתג img, מכיוון שאין צורך בו והוא לא הגיוני בתוך הרשימה ולא במיקום שלא, תשתמשו בתמונה כרקע

כותרות לעמודים

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

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

קישורים

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

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

שם ותפקיד, או תסבירו לי מה לעזאזל אתם רוצים ממני…

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

נסביר:

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

אהה, עוד משהו: * היא לא סימון גלובאלי לזה שהשדה הזה הוא שדה חובה, אש תעשו לו טובה, ותגידו לו שהשדה הוא שדה חובה.

ד.א, לjQuery יש plugin's מדהימים שיהפכו את הטופס למשהו חי, אם tooltips ברגע שמנווטים בטופס, אם רג תשמרו על הכללים האלה.

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

ניווט בעמוד ובתפריטים

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

המון אנשים משתמשים במקלדת כדי לנווט, Scott Hanselman שהוא אחד המפתחים היותר מוערכים בעולם הNET כתב פעם פוסט בעניין ואמר שאם היה אפשרי, הוא לא היה משתמש בכלל בעכבר, הוא העביר ביקורת קשה מאוד על האתרים ועל התוכנות של מיקרוסופט (והוא עוד עובד שלהם )

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

הקישור השני צריך להיות "מפת אתר"

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

תודאו את חוק הברזל הבא – TAB צריך להתקדם קדימה בדף, ALT-TAB צריך ללכת אחורה בדיוק צעד אחד אחורה, אבל בדיוק צעד אחד, בלי שום מלכודות.

שינוי גודל טקסט

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

אתם יכולים לעשות את זה ע"י שימוש בעוגיה טעימה

הקפאת ממשק

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

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

לכן, שימו קישור שאומר "עצור חדשות" או קישור אחר שיאמר למשתמש שהוא יכול לעשות את זה.

טבלאות

כבר השתמשתם?

אחרי כול הפוסט הזה חשבתי שתהיו יותר זהירים…

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

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

השתמשו בSummary כדי לתאר מה מוצג לגולש בטבלה

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

פלאש

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

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

זהו,

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

תחשבו על האנשים האלה שגולשים לאתר שלכם, תאמינו לי גוגל יחזיר לכם אהבה, וגם האנשים האלה יחזירו לכם אהבה.

בהצלחה

במידה ויש שאלות אשמח לענות עליהן

שלום לכולם,

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

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

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

בשבוע שעבר, היה לי מקרה אחר, ונדרשתי למבחן בAs3, זה היה מוזר אבל כמובן שלא סירבתי ועשיתי את המבחן

עברתי! חחח

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

המבחן היה מורכב משלוש שאלות:

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

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

שאלה שלישית
ישנו קובץ XML שמכיל את הפרמטרים הבאים
X – מיקום הX של האלמנט
Y – מיקום Y של האלמנט
FromS – שנייה שבה צריך להתחיל
ToS – שנייה שבה צריך להפסיק
Url – מיקום הקובץ

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

בהצלחה, אשמח לשמוע תגובות

שלום לכולם,

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

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

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

(צילום מסך)

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

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

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

ד.א
אם מישהו רוצה (וזה ממש חשוב לו) את הרכיב הזה בלי הלוגו שלי , שלחו מייל ואשלח אליכם גרסה ללא הלוגו שלי.
המייל שלי הוא avi.kenso@gmail.com

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

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

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

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

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

נגיע להכל, אבל קודם כל, הנה הפונקציה. (מימוש שלה בדף)

אוקיי,
נסביר את הפרמטרים:

sSrc – מיקום הקובץ הפיזי (swf) של הפלאש
sWidth – רוחב הפלאש
sHeight – גובה הפלאש
bTrans – נתון בוליאני האם הפלאש יוטמע כשקוף או לא
sFlashVars – אם אנחנו רוצים להוסיף Variables, פחות רלוונטי לבאנרים
sID -זיהוי של האובייקט בדף, ניתן גם לגשת אליו בDocument.getElementById

אוקיי, ועכשיו לפונקציה עצמה

   1: function DocumentWrite(sHtml)

   2: {

   3:     document.writeln(sHtml);

   4: }

   5: ///write flash into the html

   6: function WriteFlashObj(sSrc,sWidth,sHeight,bTrans,sFlashVars,sID)

   7: {

   8:     var sObj = "";

   9:     var sWMode = "";

  10:     var sObjID = sSrc.replace(".swf","");

  11:     var sVars = "";

  12:     var sPrfx = "?";

  13:     if(sFlashVars){

  14:         sVars = sFlashVars;

  15:     }

  16:     if(sID){

  17:         sObjID = sID;

  18:     }else{

  19:         sObjID = sSrc.replace(".swf","");

  20:     }

  21:     sObj = sObj+"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab' width='"+sWidth+"' height='"+sHeight+"' id='"+sObjID+"' align='middle' VIEWASTEXT>";

  22:     sObj = sObj+"<param name='allowScriptAccess' value='sameDomain' />";

  23:     sObj = sObj+"<param name='movie' value='"+sSrc+"' />";

  24:     sObj = sObj+"<param name='quality' value='high' />";

  25:     sObj = sObj+"<param name='bgcolor' value='#ffffff' />";

  26:     sObj = sObj+"<param name='flashvars' value='"+sVars+"' />";

  27:     if(bTrans == true){

  28:         sObj = sObj+"<PARAM NAME='WMode' VALUE='Transparent'>";

  29:         sWMode = "wmode='transparent'";

  30:     }

  31:     sObj = sObj+"<embed src='"+sSrc+"' flashvars='"+sVars+"' quality='high' bgcolor='#ffffff' "+sWMode+" width='"+sWidth+"' height='"+sHeight+"' ID='"+sObjID+"' NAME='bg' align='middle' allowScriptAccess='sameDomain' swLiveConnect=true ID='bg' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />";

  32:     sObj = sObj+"</object>";

  33:     

  34:     DocumentWrite(sObj);

  35: }

לא לדאוג, אם לא ניתן לקרוא, אני אצרף לינק לקובץ js שיהיה קריא מאוד

הנה הוא כאן

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

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

בהצלחה, וכרגיל, אשמח לשמוע תגובות.

שלום לכולם,