פורום בניית אתרים בפרוג
05/01/2011 כ"ט טבת תשע"א | גליון מס' 5

Entry

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

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

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

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

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

בברכת הצלחה פריחה ושגשוג.

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

מיזם החודש

תאטרון הצלליות

ניתן לשלוח מיזמים מקוריים למייל המערכת

תאטרון הצלליות

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

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

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

מירוץ השדרוגים

מאת: עמיחי דמארי / עמיקס סטודיו

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

משפט האינטרנט

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

עו"ד יהונתן קלינגר

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

אפיון אתרים

אפיון אתר לפי צרכי הלקוח או לפי מגבלות המערכת?

ישראל וינגרטן\WGN Media

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

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

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

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

נראה שלפטרוניות זו יש מקום ובפרט לאחר שיחת האפיון הראשונית שסיימתי לפי רבע שעה עם לקוח. הוא הכין לשיחה רשימת פיצ'רים אין סופית שאסף בקנאות מרשימה מכל אתרי האינטרנט הגדולים בעולם. הוא גם ניסה לגרום להם לעבוד יחדו. לא שיש בעיה טכנית עקרונית, הבעיה הייתה בעיקרה לוגית\שימושית כי בדרך כלל אי אפשר או יותר נכון לא מומלץ לכלול באתר תדמיתי פשוט מונה "מי מחובר" אונליין, את זיהוי כתובת ה IP שממנה הגיע הגולש, כפתור לצ'אט שהוא offline כמובן רוב הזמן, אפשרות לתרגום מכונה של גוגל ל - 70 שפות, סרגל JS תחתון צף עם חדשות אחרונות מהCNN + מזג אוויר לכל ערי העולם, חיבור לפייסבוק שמראה את מספר המעריצים הנמוך שהאתר הספיק לצבור לזכותו במשך חודש קיומו,  ואיך שכחנו, פורום קהילתי נרחב המכיל עשרה תתי פורומים המכילים הודעה אחת בנוסח "ברכות לפורום החדש כאן המקום לשאול כל שאלה בנושא X"...

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

אז מה כן עושים?

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

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

ניהול אתרים

תהליך שינוי שם לאתר

שמואל דרילמן - drvvv ניהול אתרים

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

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

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

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

לאחר מכן יש להתחבר לכלי מנהלי האתרים שם נוסיף ונאמת את הדומיין החדש 

לאחר שביצענו זאת נכנס לדומיין הישן ותחת הלשונית תצורת אתר נכנס לכלי 'שינוי כתובת'.

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

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

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

קידום אתרים seo

קישור חי או מת?

עמית מלכי - גביש פתרונות אינטרנט

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

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

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

קישור נועד להזרים גולשים לאתר, קישור נועד לחשוף את האתר שלנו לגולשים חדשים שהגיע מאתרים אחרים ולא ממנועי החיפוש.

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

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

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

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

שיווק ברשתות חברתיות

איך לעשות אירוע בפייסבוק

שלומי קוריץ - ניהול נוכחות באינטרנט

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


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

אז איך בכל זאת יוצרים אירועים רלוונטיים ללקוחות פוטנציאליים ?

  1. פתחו את האירוע לפחות שבוע עד שבועיים קודם, לפעמים אני מקבל הודעה על אירוע רק באותו יום, מה שהופך אותו ללא רלוונטי, שליחת הודעה לחברים אפילו חודש מראש -
    "שמרו את ה-10 לספטמבר פנוי" - תועיל הרבה יותר.
  2. כותרת מושכת.
    מרבית האנשים עשויים לפסול אירוע רק על פי הכותרת הלא אטרקטיבית או השגרתית מדי שלו.
    הכותרת היא זו ש"תדליק" ותביא את ה"קליק", ולפיכך חייבת להיות אפקטיבית ומגרה.
  3. פירוט תיאור האירוע - יש לפרט אודותיו בהרחבה ככל שאפשר,
    ובעיקר להדגיש את יתרונות ההשתתפות בו, מה צפוי בו, מי מוביל אותו ומי עומד מאחוריו.
    כמובן שיש ליצור כותרות ביניים המושכות את העין ולהוסיף קישורים רלוונטיים,
    בעיקר לדף נחיתה אטרקטיבי המקושר לאירוע.
  4. הפצת אירועים תהיה אפקטיבית יותר כאשר תופץ דרך דפי מעריצים וקבוצות ענין רלוונטיות.
  5. וכמובן – אנשים נוטים להגיע לאירועים שאנשים אחרים מגיעים אליהם.
    בעת יצירת אירוע חדש עבור העסק שלכם, צרו קבוצת תמיכה קטנה ומיידית שתצהיר על הגעתה (באמצעות פניה ישירה לאותם אנשים דורשי שלומכם) על מנת ליצור נפח הגעה ראשוני מינימלי.
טיפ קטן לסיום:
כדי להזמין לאירוע קרוב אורחים מאירוע שהתקיים לאחרונה שבו השתתפת, בצע את הפעולות הבאות:
1.בעת הזמנת חברים לאירוע, בחר את התפריט 'סנן חברים'.
2.בחר אירוע תחת הכותרת 'אירועים מהזמן האחרון'.
3.מכאן, באפשרותך לבחור חברים בנפרד או ללחוץ על 'בחר הכל' כדי להזמין את כל החברים שהשתתפו באירוע האחרון.
כלי זה שימושי במיוחד לאירועים חוזרים עם אותה קבוצת אנשים.

למה לא כדאי לפרסם באינטרנט

שמוליק ליבסקינד - יועץ אינטרנט וטכנלוגיות

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

ASP.NET

שימוש ב-Web.sitemap לשמירת מידע SEO

דניאל כץ

כולם מכירים את הSiteMap בתור מפת אתר עבור מנגנון הניווט של ASP.NET. אבל, מה אם היה אפשר להוציא ממנו יותר?

במאמר זה אדגים שימוש בWeb.sitemap לשמירת תכנים עבור תגיות המטא description וkeywords. גישה זו תאפשר ניהול נוח של מידע meta של האתר, תוך הפרדה מוחלטת של לוגיקה ומידע.

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

קפה עם js

שיעור מס' 5

חיים וורצמן - מתכנת .net ופיתוח Web

שינוי תוכן דינאמי באמצעות מאפיין innerHTML

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

נמשיך עם הדוגמה של "תפריט" שיצרנו בשיעור הקודם  

ראשית, "נשפץ" קצת את הפונקציה בשם ShowText שיצרנו עבור הצגת טקסט  משתנה.
בשיעור הקודם הכנסנו את הטקסט עצמו  לתוך הפונקציה באירוע של  onclick. ככה:
 
			<p onclick="ShowText('חג חנוכה חל ביום כה כסליו ונמשך שמונה ימים');">
 ישנה עדיפות לשמור תמיד את הטקסט (וכן יתר הפרמטרים) בתוך המשתנים של JS  בחלק ה-script ב- head של העמוד בצורה כזאת:
			<head>
  <title>InnerHTML Demo</title>
    <script type="text/javascript">

    var strHanuka = "חג חנוכה חל ביום כה כסליו ונמשך שמונה ימים";
    var strPurim = "חג פורים חל ביום יד אדר ובירושלים ביום טו אדר";
    var strPesach = "חג פסח חל ביום טו ניסן ונמשך שבעה ימים";
    
  </script>
 </head>

לפני שאנחנו ממשיכים את הנושא, ברצוני לציין נקודה אחת חשובה במיוחד למשתמשי לשון הקודש:
בוודאי שמתם לב שבשלושת ה"תיאורים" של החגים בדוגמא הזאת בשיעור הקודם, התאריכים העיבריים כמו כה כסליו  נכתבו ללא מירכאות - כ"ה כסליו  (לא רציתי להאריך יותר מדאי בשיעור הקודם, ואסביר את זה כאן) הסיבה היא - שכל מחרוזת מחרוזת הטקסט (string) ב-JS צריכה לפי הכללים להיות נכללת בתוך מירכאות (כפולות או בודדות - לא משנה) וכאשר "מפרש" של ה-JS פוגש מיכאות בתוך מחרוזת הטקסט (string) הוא "מבין" שזהו סוף המחרוזת ולא ממשיך "לקרוא" הלאה.
הפתרון הפשוט הוא - להשתמש בתווי  ASCII עבור HTML . למשל, כאן, בשורה שלישית, תוכלו לראות שעבור מירכאות כפולות (") קיים בשפת HTML גם קוד (34) וכותבים אותו לפי הכללים ככה: &#34; ויש לו גם "שם" - &quot;
אז אם נרצה לכתוב שורה  (string) שמכילה מירכאות באמצע,  עבור משתנה JS להצגה בעמוד HTML. נוכל לעשות את זה כך:
			var strHanuka = "חג חנוכה חל ביום כ&#34;ה כסליו ונמשך שמונה ימים";
או כך:
			var strHanuka = "חג חנוכה חל ביום כ&quot;ה כסליו ונמשך שמונה ימים";
  כעת, מבחינת JS - אין שום מירכאות בתוך השורה, ואילו HTML יתרגם את הקידוד הנ"ל כמירכאות.

 

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

לבסוף, נכתוב פונקציה בשם  ShowDesignedText. כל ההבדל בינה לבין פונקציה  ShowText שבשיעור הקודם היא - שבמקום מאפיין innerText אנחנו משתמשים במאפיין innerHTML:
 
			<script type="text/javascript">
var strHanuka = "חג חנוכה חל ביום כ&quot;ה כסליו ונמשך שמונה ימים";
var strPurim = "חג פורים חל ביום י&quot;ד אדר ובירושלים ביום ט&quot;ו אדר";
var strPesach = "חג פסח חל ביום ט&quot;ו ניסן ונמשך שבעה ימים";

var DesHanuka = "<p style='background-color:Aqua; 
                 color:Red;width:100px'>" + strHanuka + "</p>";
var DesPurim = "<p style='background-color:Yellow; 
                 color:#0000FF; font-weight: bold;'>" + strPurim + "</p>";
var DesPesach = "<p style='background-color:#00FF00; 
                 color:#660066; font-size: large;'>" + strPesach + "</p>";

function ShowDesignedText(HagText)
 { 
    document.getElementById("HagDescr").innerHTML = HagText;
 }
</script>
וכעת, נשלב את כל הנ"ל בתוך אירוע onclick ב"תפריט" שלנו:
			<table border="1" width="80%" cellpadding="5px" >
<tr>
<td width="100px">
<p style="cursor:pointer;" onclick="ShowDesignedText(DesHanuka);">חנוכה</p>
<p style="cursor:pointer;" onclick="ShowDesignedText(DesPurim)">פורים</p>
<p style="cursor:pointer;" onclick="ShowDesignedText(DesPesach)">פסח</p>
</td>
<td id = "HagDescr">
</td>
</tr>
</table>
והנה הדוגמה "העובדת":

חנוכה

פורים

פסח

 

לסיכום

בשיעור זה למדנו:
  • להשתמש במאפיין  innerHTML להחלפת התוכן הפנימי של אלמנט HTML
  • להשתמש בקודי HTML עבור מירכאות על מנת לפתור את הבעיה של שימוש במירכאות בתוך מחרוזת טקסט  ב-JS.
להתראות בשיעור הבא בס"ד.