DCSIMG
January 2012 - Posts - שלמה גולדברג (הרב דוטנט)

שלמה גולדברג (הרב דוטנט)

מרצה בסלע ויועץ בעולם ה - net.

January 2012 - Posts

פורום חדש למפתחי עולם האינטרנט

 

כחלק מהניסיון ומהמאמצים של מייקרוסופט לעזור לקהילת המפתחים להתפתח - הקימו בתקופה האחרונה מספר רב של פורומים בעברית אשר יהיו מקור ידע למתחילים את דרכם וגם למתקדמים בינינו.
 
עידו פלטו ואנוכי קבלנו על עצמנו לנהל את פורום Web Development
 
נשמח לראות אתכם שם, כשואלים וכמובן כמגיבים, אנו נעשה את מירב המאמצים שתקבלו תשובה בצורה הכי מהירה שנוכל. וכולי תקווה שפורום זה יהפוך ברבות הימים למקום בו מפתחים מוצאים את ביתם כאשר הם זקוקים לעזרה וליד מכוונת.
 
 
עידו ושלמה.
Posted: Jan 29 2012, 11:11 PM by Shlomo | with 2 comment(s)
תגים:,

HTML5 - Table of Content

 

כתבתי די הרבה על נושאים שונים של HTML5, וחשבתי לרכז את כולם.
 
בשונה ממדריכים אחרים שכתבתי, הפוסט הזה אינו מרוכז לפי סדר מסויים, אלא מגוון רחב של פיצ'רים שהסביבה נותנת.
 
אני מחלק את זה לשינויים ב - HTML, תוספות של CSS ופונקציונליות חדשה ב - JS - כמובן שישנם חידושים שחופפים ואפשר היה להצמיד אותם גם ל - CSS וגם ל - JS, אך מיקמתי אותם היכן שנראה לי יותר מתאים.
 
חשוב לשים לב שבחלק מהפוסטים יש כותרת של What new in IE8 וכדומה, אל דאגה - כאן שמתי אך ורק פוסטים של HTML5, כלומר שינויים של IE שמוגדרים מהתקן.
 
 
HTML
HTML5 - HTML Review - הסיבות למה כדאי לעבור ומה זה בכלל HTML5.
New Elements - הכרת האלמנטים החדשים.
Canvas - הכרת האלמנט שמאפשר לצייר על גבי המסך.
Generic elements - אלמנטים חדשים שהמפתחים ממציאים.
Audio - הכרת האלמנט המאפשר לנגן.
Video - הכרת האלמנט המאפשר להציג וידיאו
 
 
 
JS
The Modernizr - הכרת הספרייה המאפשרת לבדוק אלו תכונות נתמכות בדפדפן שרץ.
Worker - הכרת הדרך לעבודה אסינכרונית ב - JS.
Goelocation - כיצד לכתוב אפליקציות מבוססי מיקום.
Drag & Drop  - כיצד לגרור אלמנטים.
Selected text - כיצד נדע איזה טקסט המשתמש סימן.
Overlapping tags  - הצורה בה ה - JS יתייחס לאלמנטים שמקוננים.
Cross-Document messaging  - הדרך לתקשר בין חלונות פתוחים.
querySelector - כיצד נוכל לקבל את כל האלמנטים העומדים בתנאים מסויימים (כמו jQuery)
XDomain Request - כיצד אפשר להפעיל AJAX מול דומיין אחר.
online - offline - קבלת האירועים והמידע האם יש רשת או לא.
XML Http Request - שיפורים במנגנון AJAX
Dom Storage  - התחליף המעולה ל - Cookie
 
CSS
text-shadow - הגדרת צל לטקסט
background - השינויים בהגדרת רקע.
Media queries - כיצד לדעת מהי הסביבה בה אנחנו רצים (סלולר, מחשב, רזולוציה וכו')
Color - שינויים בצבעים.
Opacity - האפשרות לשקיפות.
border - היכולת לעגל פינות.
Content - כתיבה של טקסט בעזרת CSS
outline - עטיפת border לאלמנטים בלי לתפוס מקום פיזית.
focus selector - הכרת ה - selector שמשפיע על האלמנט שכרגע בפוקוס.
Namespace - הכרת הדרך להגדיר שמות מרחב ב - CSS.
 
 
Posted: Jan 25 2012, 10:58 AM by Shlomo | with no comments
תגים:, , ,

X-UA-Compatible meta tag

 

מהימים בהם התחלנו לקבל גרסאות חדשות של IE - קבלנו את היכולת להריץ את IE כאילו בגרסאות ישנות יותר וזאת בעזרת כלי הפיתוח של IE 
לחיצה על F12 - ושינוי ה - Document Mode.
 
ברור מאיליו שזה כלי נהדר למפתחים שיכולים לראות כיצד האתר ייראה בגרסאות שונות של IE (מעניין שאין יכולת כזאת בדפדפנים המתחרים).
 
 
מה שלא כל המפתחים יודעים הוא - שניתן "להכריח" את הדפדפן להציג את האתר ב - Document Mode שנבחר, נרצה לעשות זאת למשל אם אין לנו תקציב לדאוג שהאתר יראה כמו שצריך ב - IE9 ואנחנו רוצים להשאר בגרסה 8 של הדפדפן.
 
כל מה שצריך לעשות הוא להוסיף את תגית ה - meta הבאה:
 

<meta http-equiv="X-UA-Compatible" content="IE=8">

 
כשניתן לכתוב את הגרסאות השונות של IE או לחילופין לכתוב

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

 
ובמקרה הזה הוא גם מתחשב במה שהוגדר ב - doctype (להרחבה בנושא)
 
 
נקודה חשובה, התגית הזו (ככל תגיות meta) צריכה לשבת בתוך ה - head. אבל אסור שיופיע תגית script או style לפניה - ה - meta חייב להיות ראשון אחרי תגית ה - title.
 
הסיבה לא ברורה לי - אבל אני יכול לנחש שרינדור הסקריפטים והעיצוב תלוים בתגית הזו, ולכן לאחר שהדפדפן קרא את העיצוב או את הסקריפט אין ביכולתו לשנות את ה - Document Mode
 
 
 במאמר המוסגר.
plug-in מעניין שראיתי הוא Google Crome Frame, לא בדקתי אותו אבל הוא מבטיח שגם אם מותקן IE6 הדפים ירונדרו במנוע של Chrome ויוצגו בכל האלמנטים ש - Chrome תומך.
במקרה זה יש לכתוב

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Posted: Jan 24 2012, 02:32 AM by Shlomo | with no comments
תגים:, , , , , ,

center elements in html

 

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

<center>

    .....

</center>

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

.center

{

    margin-left: auto;

    margin-right: auto;

    text-align: center;

}

 
אלמנט שיקבל את ה - class המתאים (center) ימורכז - כמובן שהוא צריך שיוגדר לו width כלשהו שקטן מגודל ה - container שלו.
 
כל זה יעבוד רק אם לא הגדרתם הגדרה מיוחדת ל - position, אחרת (למשל fixed, absolute) צריך לעשות טריק אחר.
 

#msg

{

    position: fixed;

    left:50%;

    margin-left:-225px;

    width: 450px;

}

 
הערך של margin-left צריך להיות חצי מהערך של width כך שבכל מקרה האלמנט ימורכז לאמצע המסך.
Posted: Jan 17 2012, 08:05 PM by Shlomo | with 2 comment(s)
תגים:, ,

HTML5 - Canvas

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

<canvas id="can1" width="400" height="400"></canvas>

 
בקוד ה - js נקבל את האלמנט, נבקש את ה - Context המאפשר לצייר עליו.

onload = function () {

    var canvas = document.getElementById('can1');

    var ctx = canvas.getContext('2d');

}

 
לאחר קבלת ה - context ניתן להתחיל להשתמש בפונקציות שלו כדי לצייר.
 

var x = 0, y = 0, width = 100, height = 100;

ctx.fillRect(x, y, width, height);

 
נקבל ריבוע שחור בפינה הימנית עליונה של ה - Canvas בגודל 100 על 100.
 
במידה ונוסיף את השורה הבאה (לפני קריאת ל - fillRect)
 

ctx.fillStyle = 'rgb(200,200,200)';

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

// begin custom shape

ctx.beginPath();

ctx.moveTo(170, 80);

ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);

ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);

ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);

ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);

ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);

ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);

ctx.closePath();

// complete custom shape

 

ctx.lineWidth = 5;

ctx.strokeStyle = "#0000ff";

ctx.stroke();

 
 
Canavs - HTML5
 
 
כעת אם נוסיף (לפני השורה של lineWidth) את השורות הבאות:
 

var grd = ctx.createRadialGradient(238, 50, 10, 238, 50, 200);

grd.addColorStop(0, "#7944FF"); // light blue

grd.addColorStop(0.5, "#FF8928"); // light blue

grd.addColorStop(1, "#42FFCC"); // dark blue

ctx.fillStyle = grd;

ctx.fill();

 
נקבל:
Canvas - HTML5
 
 
ואם ממש נתפרע ונכתוב את הקוד הבא:
 

setInterval(function () {

    var grd = ctx.createRadialGradient(Math.floor((Math.random() * 255)),

                                        Math.floor((Math.random() * 255)),

                                        Math.floor((Math.random() * 255)),

                                        Math.floor((Math.random() * 255)),

                                        Math.floor((Math.random() * 255)),

                                        Math.floor((Math.random() * 255)));

 

    grd.addColorStop(0, "#7944FF"); // light blue

    grd.addColorStop(0.5, "#FF8928"); // light blue

    grd.addColorStop(1, "#42FFCC"); // dark blue

    ctx.fillStyle = grd;

    ctx.fill();

}, 200);

 
נקבל אנימציה מעניינת של צורות שונות של הרקע (במידה וניתן ערכים אקראיים לצבע - נקבל גם צבעים שונים)
 
 
סיכום:
Canvas הוא אחד היכולות החזקות של HTML5, הוא מאפשר לייצר גרפיקות בצורה שלא הכרנו קודם, כמובן שזה דורש ידע כיצד לצייר - אך בהינתן הידע (או הכלים שיידעו עבורנו) נוכל לעשות הרבה דברים שלא יכולנו לעשות קודם רק בעזרת פלאש או סילברלייט.
Posted: Jan 16 2012, 08:11 AM by Shlomo | with 2 comment(s)
תגים:, , ,

HTML5 - New Elements

 

כפי שהבטחתי בפוסט הקודם אני אדבר הפעם על אלמנטים חדשים ב - HTML5.
 
כמובן שיש יותר מידי אלמנטים חדשים, ולכן אנסה לחלק לוגית בין הסוגים השונים ולספר על חלק מהאלמנטים החדשים מכל סוג.
 
 
כשאנחנו מנסים לחלק לוגית את האלמנטים החדשים, אנחנו רואים את הסוגים הבאים:
  • אלמנטים לוגיים - כלומר אלמנטים שאין להם כמעט משמעות מבחינת הפונקציונליות שלהם - אלא הם משמשים אותנו לחלוקה הגיונית יותר של האלמנטים בעמוד.
  • אלמנטים אמיתיים - אלמנטים המכילים פונקציונליות חדשה לחלוטין.
  • מאפיינים חדשים - אלמנטים קיימים שקבלו מאפיינים חדשים המאפשרים פונקציונליות חדשה.
 
 
אלמנטים לוגיים.
עד היום כשאנחנו מעמדים את עמודי ה - html אנחנו משתמשים או ב - divs או ב - tables, אין משמעות לוגית וסמנטית לאלמנטים בהקשר לתוכן שלהם, מה שמקשה את הקריאה וההבנה של התוכן למפתחים ולרובטים החוקרים את התוכן, בעזרת האלמנטים החדשים נוכל לצקת משמעות לעטיפה של התגים בהתאם לתוכן שנמצא בפנים - חשוב לזכור אין כמעט משמעות פונקציונלית בשימוש באותם אלמנטים.
 
דוגמא לאלמנטים החדשים.
  • Article - המקבילה הכי דומה ל - div, אלמנט המכיל תוכן מסויים.
  • Footer - מידע כמו זכויות יוצרים, מידע משפטי וכן הלאה.
  • Header - מידע בכותרת העמוד.
  • Nav - לינקים וניווט.
  • Section - עוטף כמה Article (דומה ל - div שעוטף div)
  • Aside - מכיל מידע ליד (על) Article
  • Figure - תמונה המסבירה תוכן של מאמר.
  • Dialog - אלמנטים כמו צ'אט וכדומה.
  • dt - מידע של משתתף אחד בדיאלוג.
  • dd - מידע של משתתף שני בדיאלוג.
 
 
שימוש באלמנטים הללו מאפשר להסתכל על האלמנטים מבלי לקרוא את התוכן שלהם ולהבין במה מדובר - לדוגמא כשרואים אלמנט מסוג nav מבינים שמדובר בניווט של העמוד, וכן הלאה.
 
 
 
אלמנטים אמיתיים.
יש הרבה אלמנטים חדשים, נראה דוגמאות לחלק מהם.
 
Mark - מאפשר לסמן מידע חשוב בתוך טקסט, לדוגמא:
 
My Name Is: <mark>Shlomo</mark>
ייתן את התוצאה הבאה
mark - html5
Progress - מאפשר לנו להשתמש ב - Progress bar אמיתי של מערכת ההפעלה כדי להציג התקדמות כלשהי למשתמש.
 
<progress max="100" value="30"></progress>
Progress HTML5
Details, Summary - מאפשר לנו להסתיר תוכן ולהציג בעזרת משהו שדומה ל - Expander
 
 
<details open="open">
    <summary>The title of the details</summary>
    <p style="padding-left:20px">
        Content Content Content Content <br />
        Content Content Content Content <br />
        Content Content Content Content <br />
        Content Content Content Content <br />
    </p>
</details>
 
Details, Summary - HTML5
 
אלו דוגמאות לאלמנטים חדשים המאפשרים לנו לעשות דברים חדשים שחלקם לא יכולנו לעשות ועבור חלקם היינו צריכים לעבוד קשה, (כמובן שיש עוד אלמנטים שלא תיארתי כאן.)
 
 
מאפיינים חדשים.
לכל מיני אלנטים קיימים נוספו מאפיינים חדשים המאפשרים יכולות חדשות, לדומא לאלמנט input עבור המאפיין type נוספו היכולות הבאות:
 
Range  - מאפשר לקבוע תחום.
 
 
Range - HTML5
 
דוגמא נחמדה לשימוש תהיה לקשר בן ה - Range לבין ה - Progress
 
<progress max="100" 
            value="30" 
            id="prog"></progress>
 
<input type="range" 
        min="0" 
        max="100" 
        value="30" 
        onchange="document.getElementById('prog').value=this.value" />
 
Email המאפשר לקבוע שבתיבת טקסט מסויימת יצטרכו להכניס Email, יחד עם מאפיין חדש בשם requierd המגדיר שבזמן submit חייב להיות שם ערך.

<input type="email" required="required" />

email requierd - HTML5

 
חשוב לשים לב שלא צריך לכתוב קוד javascript כדי לקבל את ההודעות על מה שחסר (או על התוכן שהוא מייל לא תקין).
 
יש עוד רבים כמו color, time שמאפשרים יכולות חדשות שבעבר היינו צריכים לעבוד קשה בשביל להשיג אותם (time נותן לוח שנה)
 
יש גם מאפיין בשם placeholder המאפשר להגדיר טקסט בצבע אפור כטקסט התחלתי לפני שהמשתמש התחיל לכתוב
 
<input type="text" placeholder="הקלד שם" />
plceholder - HTML5
 
(נלקח מהקורס של מכללת סלע על HTML5)
inputs - HTML5
 
 
 
אחד מהאלמנטים החדשים מאפשר לנו לעשות autocomplete מבלי תוספות רק לדאוג למידע)
 
<input type="text" list="list1" />
<datalist id="list1">
    <option value="שלמה גולדברג"></option>
    <option value="שלום כץ"></option>
    <option value="נועם כפיר"></option>
    <option value="מנחם הולידר"></option>
    <option value="חיים בריקמן"></option>
    <option value="יוסי גולדברג"></option>
    <option value="שמוליק סגל"></option>
</datalist>
 
datalist - HTML5
 
כמובן שיש עוד הרבה ולא אפרט כאן, חשוב לראות ולהבין שהיכולות של HTML5 מקילות עלינו את החיים.
 
נקודה חשובה נוספת, לא כל הפיצ'רים שתארתי כאן נתמכים בכל הדפדפנים (כל פיצ'ר ודפדפנו) - אבל הדרך לא ארוכה עד שכולם יתמכו בהכול.
 
Posted: Jan 10 2012, 10:39 AM by Shlomo | with 1 comment(s)
תגים:, ,

HTML5 - The Modernizr

 

בדיקת תמיכת פיצ'ר בדפדפן:
כפי שהבטחתי בפוסט הקודם אני אדבר היום איך כותבים ב - HTML5 עם מינימום נזק לדפדפנים שאינם תומכים ב - HTML5.
 
 
כשנרצה להשתמש בפיצ'רים שונים של HTML5 נרצה לוודא האם הדפדפן תומך בזה - לדוגמא לפני שימוש ב - localStorage וכדו'.
 
כדי לוודא זאת נוכל להוריד ספריית JS חביבה בשם Modernizr. ולכתוב:
 
 
 
if(Modernizr.localstorage)
{
 
}
 
וכך נוכל לבדוק כל פיצ'ר שנרצה להשתמש איתו ב - JS בבטחה.
 
אוטומציה לתהליך: 
כמובן שנעדיף מנגנון יותר אוטומטי שיטען קבצי סקריפט שונים במידה והדפדפן תומך (או לא) בפיצ'ר מסויים.
 
כדי לעשות זאת נצטרך להוריד עוד ספרייה קטנה בשם yepnope ואז נוכל לכתוב קוד כזה:
 
Modernizr.load({
    test: Modernizr.localstorage,
    yep: 'workWithStorage.js',
    nope: 'workWithcookie.js'
});
 
וכך יירד קובץ ה - JS (או ה - CSS) המתאים לפי הפיצ'רים שהדפדפן תומך.
 
 
תמיכה ב - CSS:
נוסף על כך ספריית ה - Modernizr מוסיפה css classes ל - html לפי התכונות הנתמכות, כך שאם הדפדפן שלנו לא תומך ב - border-raduis קובץ ה - html יקבל את class בשם no-borderradius.
לדוגמאות והרחבה בנושא בבלוג של גיא בורשטיין.
 
 
 
ספריות עזר לתמיכה באלמנטים שונים:
יש הרבה ספריות עזר כדי לקבל יכולות HTML5 בדפדפנים ישנים.(לדוגמא כאן).
 
נניח שתרצו להשתמש בתג progress של HTML5 ואתם נמצאים בדפדפן שאינו תומך, תוכלו להוריד מכאן css ו - js שיהפכו כל אלמנט progress לתמונה שתחקה את ההתנהגות של progress.
 
 
 
לסיכום - ניתן כבר היום להתחיל לכתוב עם HTML5, נוכל להחליט שאנחנו תומכים רק בדפדפנים מתקדמים (שזו החלטה לגיטימית - בעיקר אם אנחנו כותבים אפליקציות לסביבות סגורות) או שנחליט שאנחנו רוצים לתמוך בכולם ובמקרה זה נצטרך להשתמש בספריות חיצונית כדי לקבל תמיכה אחורה לדפדפנים שונים.
Posted: Jan 04 2012, 10:34 AM by Shlomo | with no comments
תגים:, ,

מפגש פורום תפוז

כמידי תקופה אנחנו (חברי פורום תפוז) מארגנים מפגש טכנולוגי.
 
המפגש הבא יערך ב - 24 לינואר יום שלישי.
 
מכללת סלע מארחת כמידי פעם את המפגש - הכתובת: ברוך הירש 14 בני ברק (מול קניון אילון - חניה חופשית)
 
 
בתוכנית:
17:30 - 18:00 התכנסות.
 
18:00 - 18:50 הרצאה ראשונה של עידו פלטו על Fiddler.
 
18:50 - 19:00 הפסקה.
 
19:00 - 19:50 הרצאה של גדי מאיר על אחד מהנושאים החביבים עליו (כנראה על הכנת "היישום שלך לסביבת הייצור" או על "למידה מהנחיות של מייקרוסופט לגבי כתיבת קוד נכון")
 
20:00 - 20:50 הרצאה של רון קליין על שינוי קוד - מפרוצדורלי ל OOP. או על מבוא ל MSMQ ודוגמה מהחיים.
 
 
ניתן להרשם ב - LinkedIn.
http://tapuz-net-2012-a.eventbrite.com/
 
Posted: Jan 02 2012, 08:17 PM by Shlomo | with no comments
תגים:

HTML5 - HTML Review

הקדמה:
מאז שכתבתי על כל מיני פיצ'רים ב - HTML5, דברים התווספו והשתנו בתקן ובדפדפנים, אני מתכוון להמשיך לכתוב על פיצ'רים שונים ומשונים של התקן, אך לפני הכול קצת היסטוריה ולמה בכלל אנחנו רוצים לעבוד עם HTML5.
 
 
היסטוריה:
HTML - Hyper Text Markup Language, נולד בשנת 1991 על ידי Tim Berners-Lee, כדרך להעברת טקסט סטטי תמונות ולינקים לדפים סטטים אחרים על גבי הרשת (באותה שנה גם יצא תקן ה - HTTP לאויר העולם).
 
בשנת 1994-1995 העולם התקדם לתקן HTML2 שהכיל פיצ'רים חשובים כמו טבלאות העלאת קבצים וכד'.
 
בשנת 1996 קבלנו את המושגים CSS1 ו - JavaScript שקידם את יכולות ה - HTML מסתם מידע סטטי לדף עם מידע דינמי (לפתע היה מקצוע בשם "מתכנת Web").
 
בשנת 1997 התקדם התקן ל - HTML4 (לכמה חודשים היה HTML3.2) עם יכולות ה - Frames ואחרים.
 
בשנת 1998 - התקדם ה - CSS לגרסה 2, עם פיצ'רים חדשים לעיצוב.
 
בשנת 2000 - השתנה התקן ל - XHTML וגרם למפתחי ה - HTML לכתוב קוד יותר מוקשח ותקני.
 
בשנת 2002 התחילו מלחמות הדת כיצד נכון וראוי לעמד את דפי ה - HTML (בעזרת div/table).
 
בשנת 2005 נכנס לתקן המושג AJAX (ב - IE זה היה קיים משנת 2002 כ - ActiveX)
 
ובשנת 2009 התחילו לדבר על HTML5 (למעשה W3C התחיל את תקן XHTML2 וקבוצת WHATWG התחילו את תקן Web Forms and Web Application, ולאחר מכן הם התאחדו לכדי תקן HTML5)
 
 
כמובן שרשימה זו חלקית ואינה מלאה וישנם כל מיני גרסאות ביניים, אבל בגדול זה מה שעברנו עם ה - HTML.
 
 
חשוב לשים לב שמשנת 1991 עד 1997 עברנו ארבע גרסאות, ומאז ועד היום אנחנו תקועים באותה גרסה, (XHTML אינו נחשב לשינוי גרסה מכיוון שזה רק מדבר על הקשחת הקוד) כשבפועל העולם מתקדם והתקן שבהחלט התאים אז כבר אינו מתאים היום, בעבר כתבו דפי מידע (ויקיפדיה) היום מצפים מאיתנו לכתוב אפליקציות (פייסבוק), מה שגורם לנו לעשות כל מיני דברים מוזרים ולכתוב הרבה קוד שבכל סביבה אחרת זה טריוויאלי לחלוטין.
 
 
 HTML5:
מה הם הסיבות שבעטיים נרצה לעבור ל - HTML5.
 
כמובן הסיבה הראשונה שהזכרתי למעלה, שהתקן הנוכחי אינו מתאים לאתרים מודרניים ואינו מכיל מספיק פיצ'רים לכתיבה נוחה.
 
עימוד האתר בעזרת Divs או Tables אינו נכון לוגית, מכיוון שאין שום משמעות לאלמנטים (div, tr) בהקשר של התוכן שהוא מכיל, אנו מצפים להשתמש בתגים בעלי משמעות לתוכן שהם מכילים (nav עבור תוכן שמכיל לינקים וכדו')
 
הצורך לכתוב קוד שונה עבור כל דפדפן - בעוד שמבחינתנו הדפדפן הוא האמצעי (אירוח האפליקציה) ולא המטרה.
 
 
התקן:
חשוב לזכור - לפי השמועות התקן ייסגר בשנת 2022 (אלפיים עשרים ושנים) וזה עוד ה ר ב ה זמן - דברים משתנים וישתנו ככל שיעבור הזמן, לא כל הדפדפנים תומכים בכל התכונות, ולא כולם מממשים אותם בצורה זהה בשלב זה. אבל אם אפשר לכתוב כבר עכשיו בדברים שכבר סגורים וכנראה לא ישתנו - כדאי לעשות זאת ולא להשאר מאחור.
 
יש פתרונות מעניינים לבעיות התאימות - ואני אספר אליהם בפרק הבא.
 
 
מה זה בכלל HTML5:
מתי שהוא כשהתחילו לדבר על HTML5, הראו את הגרפיקות המשחקים והאנימציות המדהימות שאפשר לעשות בעזרת HTML5.
 
זהו לא HTML5, זה באזז.
 
הסיבה שבעיני הקהל הרחב מה שמתקשר ל - HTML5 אלו הדברים שתיארתי, מכיוון שכשצריך להציג HTML5 צריך להראות דברים שמושכים את העין וכמובן משחקים ואנימציות זה דבר מדהים.
 
אבל אם נחשוב לרגע בהגיון, כמה אחוז מהקוד בצד הלקוח ברוב החברות באמת צריך אנימציות וגרפיקה מתקדמת, אחוז אפסי, ולכן בעיני אין לזה כמעט משמעות.
 
מה בכל זאת זה HTML5, התשובה היא: HTML + CSS3 + JavaScript API,
 
HTML - קיבל הרבה אלמנטים חדשים - כמו סוגים חדשים של Input, לדוגמא (range, mail, color), הוא קבל את היכולת להגדיר required על כל input בלי צורך לכתוב javascript שיעשה את הבדיקה, ועוד.
 
CSS3 - מאפשר מאפיינים חדשים כמו border-raduis, css selctors.
 
JavaScript API - מאפשר יכולות של הרצה מקבילית של קוד, זניחת הכתיבה המעצבנת של Cookies, כתיבה לבסיס נתונים בצד הלקוח, ועוד.
 
 
זהו בעיני HTML5, הכתיבה הקלה יותר, מרובת הפיצ'רים שחוסכים זמן ועבודה, זהו ה - HTML5 האמיתי שכל כך מרגש אותי ואני מחכה לו בקוצר רוח.
 
 
 
בפוסט הבא אני אציג ואספר כיצד כותבים קוד HTML5 מבלי לפגוע בדפדפנים שאינם תומכים ב - HTML5 (או לפחות ננסה לעשות את המקסימום)
Posted: Jan 01 2012, 08:44 PM by Shlomo | with 4 comment(s)
תגים:, , ,