מתחילים ללמוד קידוד

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

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

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

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

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

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

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

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

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

טיפ 1 - ולידטור כתיבה נכונה:
פה ראיתי פחות מודעות לכתיבת CSS נכונה מאשר למודעות של תקני ה-HTML וה-XHTML השונים, דבר שלצערי מצער מאוד.
כתיבה נכונה של CSS יכולה למנוע באגים או תופעות בלתי נעימות שקורות עקב התנגשות של פקודות שונות, דבר שיעזור לבטל את התסכול שנוצר וחוסר ההבנה למה אלמנט לא מגיב כמו שרציתם.
כשאתם מריצים בוליטור CSS את הקוד, רצוי לשנות את הערך ב-warnings לערך All, ובכך לקבל תמונה שלמה הכוללת המלצות שיכולות לעזור למנוע באגים בהמשך הפיתוח.

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

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

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

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

יצירת תפריט לאתר

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המשך גלישה מהנה.

OneNote - ההברקה של מייקרוסופט

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המשך גלישה מהנה.

שינויים בבלוג

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

שינויים בבלוג

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

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

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

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

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

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

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

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

למי שיש רעיונות, הצעות, הארות לבלוג, זה הזמן!
המשך גלישה מהנה.

XML - מה זה?!

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

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

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

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

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

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

מה זה החתול הזה DTD?
ראשית, לא מדובר בחתול, ומסמך ה-DTD (ראשי תיבות של Document Type Definition, בעברית: הגדרת סוג מסמך) מגדיר את ההררכיה בדף (לדוגמא, הוא יכול להגדיר ששדה input לא יכול להיות ישירות ב-form, והוא נכנס תחת אלמנט כמו p, אלמנט block) הבנוי בעקרונות ה-XML (בכוונה נזהרתי במילים, אם כי אין לי דרך טובה להגיד את זה).
במסמך ה-DTD ניתן לקבוע היכן כל אלמנט יכול לבוא, אילו אלמנטים הם חובה, מתי הם באים וכדומה (אם תחשבו על זה, בעצם ככה הגדירו לנו את סוגי ה-XHTML השונים).


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

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

הכירו את XSL
אחד מהטכנולוגיות הנספחות ל-XML, כאשר הכתיבה שלו היא דומה באופן מפחיד לכתיבה של XML עצמו, למרות שהמהות שונה.
XSL (מוכר גם כ-XSLT, ראשי תיבות של eXtensible Stylesheet Language Transformations) הוא הדרך של לשכתב מידע XML ל-HTML קריא (ומגניב), כדי שהמחשבים יוכלו להציגו, ואכן למרות ההגדרה המוזרה הזאת, זה מה שנעשה בשטח.
בעזרת XSL ניתן לתרגם מידע ב-XML ישירות ל-HTML ובכך להציג לקורא את אשר אנו חפצים.

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

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

DOM - גם על זה W3C השתלטו
DOM (ראשי תיבות של Document Object Model) הינה הדרך לגשת לעצמים בדפים מבוססי XML (כולל HTML) ולהשפיע על אלמנטים ללא תלות ובזמן אמת.
בעקבות שימוש של זה בדפדפנים שונים בעזרת JS כדי להשפיע על דפי ה-HTML, החליטו W3C להציג תקנים קבועים.

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

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

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

המשך גלישה מהנה.

מסע הצלב של IE

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

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

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

אז מה זה מעניין אותנו?!
ההשלכות של המעשה גדולות, ומקודדי האתרים מצאו את עצמם בין תקנים ובין המון גורמים הדורשים התחשבות, וכאשר מקודדים אתר, צריך לדאוג שבמחשב יהיו כל הדפדפנים, בשביל שתוכלו לסדר תאימות לכולם.
טוב, כל הדפדפנים זו הגזמה, אבל רצוי לדאוג שבמחשב יהיו 5 הדפדפנים הגדולים:
IE6, IE7, FF3, Opera 9, Safari 3

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

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

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

<!--[if lt IE 7]>
<link rel="stylesheet" href="css/iefix.css" type="text/css">
<![endif]-->

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

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

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

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

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

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

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

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

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

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

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

המשך גלישה מהנה.

הלקוח, מה הוא רוצה?

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

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

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

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

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

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

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

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

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

המשך גלישה מהנה.

קידוד בעזרת DIV, אבל לא רק

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

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

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

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

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

דוגמה לדפים משלב 2:

HTML Document (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>game</title>
<link rel="stylesheet" href="./global.css" type="text/css" />
</head>

<body>
<!-- Text -->
</body>
</html>

CSS Document (global.css):

body
{
direction: ltr;
padding: 0px;
margin: 0px;
font-size: 14px;
font-family: arial,verdana,sans-serif;
}

שלב 3 - אלמנט גלובאלי
הערה לפני: מעתה קוד ה-HTML עליו אני אכתוב בא במקום ההערה במסמך ה-html שהצגתי קודם.

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

HTML Document (index.html):

<div id="global">

</div>

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

CSS Document (global.css):

#global
{
width: 800px;
border: 1px solid gray;
margin: 10px auto 5px;
}

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

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

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

HTML Document (index.html):

<div id="global">
 <div id="top">

 </div>
 <div id="left">

 </div>
 <div id="right">

 </div>
 <div id="bottom">

 </div>
</div>

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

CSS Document (global.css):

#top, #bottom
{
padding: 0.5em;
background-color: gray;
color: white;
clear: left;
}

#left
{
float: left;
width: 30%;
margin: 0;
padding: 1em;
}

#right
{
border-left: 1px solid gray;
margin-left: 32%;
padding: 1em;
}

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

שלב 5 - תוכן ואלמנטים נוספים
כעת לאחר שיש בידינו מבנה, אנו לא נשתמש ב-div אלא אם נצטרך את התכונות שלו (אלמנט מסוג block ללא תכונות עיצוביות נוספות), אלא באלמנטים לפי הצורך:

1. נשתמש בתגי ה-H עבור כותרות.
2. נשתמש ברשימה (UL) עבור תפריטי קישורים.
3. בתגית P עבור פסקאות.
4. בכל אלמנט אחר בעת הצורך.

כאשר יש בידינו את המסמך הכללי, אנו ניצור תגית H1 לכותרת העליונה, ורשימה ב-DIV השמאלי עבור לינקים (הכוללת בתוכה כבר לינקים לצורך העניין), אשר מעליה נוסיף תגית H2 לכותרת של הרשימה.
ניתן כבר להוסיף תוכן בשביל שנידע סדר גודל של דברים, ובכדי שנוכל לעצב הכל בהתאם.

HTML Document (index.html):

<div id="global">
 <div id="top">
   <h1>iBlog</h1>
 </div>
 <div id="left">
   <h2>Links</h2>
   <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
   </ul>
 </div>
 <div id="right">
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
 </div>
 <div id="bottom">
   (c) Copyright
 </div>
</div>

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

CSS Document (global.css):

h1, h2, #left ul
{
padding: 0;
margin: 0;
list-style: none;
}

אלמנטים נפוצים שהייתי ממליץ להשתמש בהגדרות עיצוב אלו כדי לבטל את שלהן:
ul, dl, dt, dd, form, h1, h2, h3, h4, h5, h6, h7, p

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

CSS Document (global.css):

h1
{
text-align: center;
}

#left ul a
{
display: block;
width: 90%;
background-color: gray;
color: white;
margin-bottom: 2px;
text-align: center;
text-decoration:none;
}

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

CSS Document (global.css):

#left ul a:hover
{
background-color: black;
color: white;
}

שימו לב: חובה לבדוק אם ה-HTML וה-CSS תקינים בעזרת ולידטור.

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

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

קודים מלאים

HTML Document (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>game</title>
<link rel="stylesheet" href="./global.css" type="text/css" />
</head>

<body>
<div id="global">
 <div id="top">
   <h1>iBlog</h1>
 </div>
 <div id="left">
   <h2>Links</h2>
   <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
   </ul>
 </div>
 <div id="right">
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
   <p>
     text text text text text text text text text text text<br />
     text text text text text text text text text text text
   </p>
 </div>
 <div id="bottom">
   (c) Copyright
 </div>
</div>
</body>
</html>

CSS Document (global.css):

body
{
direction:ltr;
padding: 0px;
margin: 0px;
font-size:14px;
font-family: arial,verdana,sans-serif;
}

#global
{
width: 800px;
border: 1px solid gray;
margin: 10px auto 5px;
}

#top, #bottom
{
padding: 0.5em;
background-color: gray;
color: white;
clear: left;
}

#left
{
float: left;
width: 20%;
margin: 0;
padding: 1em;
}

#right
{
border-left: 1px solid gray;
margin-left: 22%;
padding: 1em;
}

h1, h2, #left ul
{
padding: 0;
margin: 0;
list-style: none;
}

h1
{
text-align: center;
}

#left ul a
{
display: block;
width: 90%;
background-color: gray;
color: white;
margin-bottom: 2px;
text-align: center;
text-decoration:none;
}

#left ul a:hover
{
background-color: black;
color: white;
}

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

ביום בו המחשב יכיר אותכם

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

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

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

חושבים שזה מדהים? בואו נקפוץ ליום שאחרי.

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

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

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

המשך גלישה נעימה ואנונימית.