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

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

מורה הנבוכים ל- HTML5

ונתחיל מהשאלה הבסיסית ביותר:

מהו HTML5?

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

אם כך, מהו HTML5?

ההגדרה המדויקת ביותר הינה:

אוסף תגים חדש ב- HTML, בשילוב אלמנטים חדשים ב- CSS3 ויכולות חדשות ב- JavaScript.

אוסף התגים, האלמנטים ויכולות ה- JavaScript החדשות מתרכזים סביב הנושאים הבאים:

1. ביצועים
2. Semantic Web
3. עיצוב
4. מדיה
5. גרפיקה
6. עבודה ב- Offline ואחסון מקומי
7. קישוריות
8. גישה לחומרה מקומית

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

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

HTML5 מכיל תגים חדשים ב- HTML ההופכים את הדף לקריא הרבה יותר. למשל, רובכם וודאי מחלקים את דפי ה- Web שלכם באמצעות תגי Div שונים, כאשר כל Div אחראי לאיזור תוכן מסויים, והגדרת האיזור מתבצעת באמצעות ה- id attribute או class attribute.

לדוגמה:  <div class=’header’></div>, או <div class=’menu’></div>.

באמצעות HTML5 ניתן להחליף את התגים האלו ב: <header></header>, או <menu></menu>

תגים חדשים אלו מאפשרים בניית דף קריא הרבה יותר (מה שמכונה: Semantic Web), המאפשר גם לתוכנות שונות לקרוא את הדף ולהבין את מבנהו. רשימה מלאה של התגים החדשים ב- HTML5 ניתן לראות כאן.

 פינות מעוגלות. ב- Word זה קיים כבר שנים...

אם תשאלו כל מעצב Web מתחיל מהו האלמנט העיצובי החסר ביותר בפיתוח אתרי אינטרנט, תקבלו כנראה את אותה התשובה: פינות מעוגלות!. ובכן, (תופים בבקשה...) כחלק מ- CSS3 התווספה, סוף סוף, היכולת להגדיר פינות מעוגלות!
האלמנט border-radius מאפשר להגדיר את רדיוס עיגול הפינה, ובכך הוא עונה על תפילותיהם של מעצבים מתוסכלים ומפתחים מותשים, שנאלצו למצוא פתרונות עוקפים לבעיה הקרדינלית הזו.
אלמנט זה מתווסף לעוד אלמנטים רבים אחרים שהתווספו ב- CSS3, ומרכיבים ביחד אתו את HTML5.

- אחת היכולות המשמעותיות ביותר בעיני ב- HTML5 היא יכולת ה- Local Storage. יכולת זו מאפשרת, לראשונה, לשמור מידע בתחנת הקצה של המשתמש לאורך זמן, גם לאחר שהדפדפן נסגר. למעשה, נפתחת באמצעות יכולת זו האפשרות לממש Cache של נתונים בדפדפן, באופן שעשוי לשפר את הביצועים בצורה משמעותית.
לעתים אני שומע מלקוחות את התגובה הצוננת הבאה: "על מה כל ההתרגשות? אפשר לעשות אותו דבר ב- cookies כבר שנים!".
יש אמנם קווי דמיון מסויימים בין cookies ו- Local Storage, אולם חשוב לשים לב להבדלים:

• באמצעות Local Storage ניתן לשמור עד 10MB של נתונים, בעוד ש- Cookies מוגבלים ל- KB בודדים.
• ל- Cookies יש תאריך תפוגה, בעוד של- Local Storage אין.

השימוש ב- Local Storage פשוט ביותר:
localStorage[‘person’]=p

הסבר מקיף על השימוש ב- Storage תוכלו למצוא כאן.

זהו, כמובן, רק קצה הקרחון של היכולות החדשות ב- HTML5. מומלץ להתעדכן בשאר היכולות המתקדמות והמסקרנות.

HTML5 - סטנדרט שעוד לא נקבע סופית

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

מצב זה מחייב זהירות מסויימת כאשר באים לפתח ב- HTML5, כפי שנראה בהמשך.

סטטוס עדכני של HTML5 ניתן לראות כאן:

http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

אז לאחר שהבנו מהו HTML5, אפשר לעבור לשאלה הבאה, שהיא:

אילו דפדפנים תומכים ב- HTML5?

השאלה הזו, למרות שהיא נראית פשוטה, למעשה אינה כזו.

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

לאור זאת ניתן לומר כי השאלה לעיל אינה רלוונטית, והשאלה המעניינת באמת הינה:

אילו דפדפנים תומכים ביכולת שמעניינת אותי?

ופה התשובות משתנות מאוד.

לדוגמה, ל- Local Storage שתואר לעיל קיימת תמיכה מ- Internet Explorer 8 ומעלה, ו- Chrome 4 ומעלה.

מצד שני, ה- Application Cache (שמאפשר להפעיל יישומי Web גם כאשר התחנה היא Offline) נתמך ב- Internet Explorer 10 , והתמיכה של Chrome שונה במעט מהסטנדרט הקבוע.

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

וכעת נגיע לשאלה החשובה באמת:

האם כדאי לפתח מערכת ב- HTML5?

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

האם כדאי לפתח מערכת שעושה שימוש ביכולת X של HTML5?

הדרך לענות על השאלה הזו, היא באמצעות מענה על השאלות הבאות:

1. האם שימוש ביכולת X ישפר משמעותית את המערכת שלי? (בין אם מדובר בהוספת גרפיקה, שימוש ב- Cache מקומי או הצגת פינות מעוגלות)
2. האם הדפדפנים הנמצאים בארגון תומכים ביכולת זו? (שימו לב – לא מעניינת אותנו התמיכה ביכולות שאנו לא משתמשים בהן!)
3. (שאלה אופציונלית) האם יכולת X כבר הוכרזה כחלק אינטגרלי מהסטנדרט של HTML5?

אם התשובה לשתי השאלות הינה חיובית – קדימה לדרך! אתם יכולים להתחיל לעשות שימוש ביכולות החדשות של HTML5 בביטחון רב יחסית, ולהתחיל להכיר את הדור הבא של יכולות ה- Web.

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

אם אתם מפתחי HTML5 ו- JavaScript, אתם יכולים לפתח אפליקציות Windows 8 עם הידע שכבר רכשתם ועם הספריות שאתם רגילים להשתמש בהן. עבור קוד ה- jQuery שלכם, עדכנו את הספריה לגרסה החדשה jQuery 2.0 בטא ועקבו אחרי דוגמאות השימוש על מנת ללמוד לנצל את כל היכולות החדשות.

אם פיתחתם כבר אפליקציות Windows 8 וניסיתם להשתמש ב- jQuery בגרסאות קודמות, לעתים הייתם נתקלים בהודעות שגיאה בעיקר בכל מה שקשור לתכנים דינמיים. הבעיה נבעה מהעובדה שאפליקציות Windows Store יכולות לגשת ישירות ל- API’s של ה- Windows Runtime” מה שחייב מודל אבטחה חדש שהגביל את jQuery וגרם לעתים לשגיאות.

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

שאלות בנושא פיתוח אפליקציות Windows Store? כנסו לפורום שלנו בעברית!

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

תזכורת – ספריית JsRender באה לספק לנו דרך טיפה יותר נחמדה כדי ליצור תבניות JS ב-5 HTML.
היתרון והחשיבות של תבניות ברור – לכתוב קוד מובנה פעם אחת ולהשתמש בהרבה מקומות והתחלנו לראות כיצד עושים זאת בחלק הראשון של המאמר.

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

JsRender מאפשר לנו לנווט למעלה ולמטה בהירארכיה של אובייקטים. לניווט למטה משתמשים בנקודה או סוגריים מרובעות. ל-Car יש מאפיין מסוג Art, ולו יש מאפיין בשם ImageUrl. כדי להגיע אליו אפשר להשתמש ב - Art.ImageUrl,
או Art[“ImageUrl”] :

<img class='pic' src = '{{>Art.ImageUrl}}' title='{{>Name}}'/>

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

There are no {{>#parent.data.Name}} currently for rent

כאן אנחנו עולים 2 רמות:

{{for Colors}}
  <li>
    <div style='color:{{>ColorName}}'>{{>ColorName || 'No color available'}}  {{>#parent.parent.data.Name}}
    </div>                      
  </li> 
{{/for}}

הרחבות

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

$.views.helpers({
            toUpper: function (val) {
                return val.toUpperCase();
            }
        });

צריך לוודא שהקוד רץ בעליית הדף או לפני שימוש כמובן. כעת לגבי השימוש – קוראים לפונקציה עם ~ ומעבירים את הערך הרצוי:

{{>~toUpper(Name)}}

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

$.views.converters ({
            quality: function (val) {
                return val > 2010? 'Premium':'Vintage';
            }
        });

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

{{quality:Model}}

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

$.views.helpers({
            noDataMessage: { msg: 'No Data' },
            toUpper: function (val) {
                return val.toUpperCase();
            }
        });

ונצרוך אותו בתוך התבנית – במקום לכתוב את המחרוזת 'No Data' נשתמש בפרמטר שהגדרנו:

<div >Miles Per Gallon: {{>MilesPerGallon || ~noDataMessage.msg}}</div>

עוד לגבי תבניות

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

$.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
            var cars = data.d;
            var tmplString = "<li><div class='item'><div class ='caption'>{{>~toUpper(Name)}} {{>Model}} </div></li>";
            
            var tmpl = $.templates(tmplString);
            var htmlString = tmpl.render(cars);
            $("#carRentalList").html(htmlString);

נקבל:

• BMW 2009
• FIAT 2011
• MERCEDES 2012

עוד אפשרות הינה לרשום את המחרוזת של התבנית, ולצרוך אותה מאוחר יותר, בפונקציה אחרת למשל. לאחר רישום התבנית עם שם, נראה אותה ב Intellisense של $.render.

כדי לרשום תבנית משתמשים שוב ב $.templates, עם עוד פרמטר של השם שניתן לתבנית - $.templates('customTmpl', tmplString)

$.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
            var cars = data.d;
            var tmplString = "<li><div class='item'><div class ='caption'>{{>~toUpper(Name)}} {{>Model}} </div></li>";
            
            $.templates('customTmpl', tmplString);//רישום
            var htmlString = $.render.customTmpl(cars);//צריכה
            $("#carRentalList").html(htmlString);
        }, "json");

נריץ ונקבל את אותו פלט כמו מקודם.

סיכום

JsRender הינה ספרייה שעוזרת לנו לכתוב קוד מובנה ולהשתמש בו בהרבה מקומות. ראינו את ה syntax הבסיסי שנע בין מיצוב מאפיינים בתבנית, דרך תמיכה בלולאות, ניווט בהירארכיה של אובייקטים ותמיכה בתנאים. ניתן להרחיב את הפונקציונליות על ידי שימוש ב- functions, converters, tags ו – template parameters. היכולת להשתמש במחרוזות כתבניות, שילוב בין מחרוזות ועוד, מאפיינת את הספרייה כדינאמית וגמישה.

יש לכם עוד שאלות בנושאי פיתוח לווב? היכנסו לפורום Web Development שלנו בעברית! 

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

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

JsRender הוא עוד יהלום קטן בנוף האינסופי של סקריפטים חדשים שיוצאים בעת האחרונה והוא הממשיך הישיר של Jquery Templates שננטש באיזור 2011.

JsRender בא לספק לנו דרך טיפה יותר נחמדה כדי ליצור תבניות JS ב-5 .HTML ויש לו מספר שיפורים ומאפיינים ייחודים:

• אין תלות ב Jquery
  
• אין תלות ב DOM
  
• תומך ביצירת פונקציות הרחבה (בהמשך...)
  
• ביצועים גבוהים(String based rendering)

הבה נצלול פנימה קצת ונראה את האפשרויות השונות של הספריה.

הכנה

ניצור שירות שיספק לנו רשימת רכבים להשכרה. נקים פרויקט חדש מסוג Web Application Project.
אתם יכולים להשתמש בגרסה החינמית Visual Studio Express 2012 for Web.

נוסיף פריט חדש - Ajax-Enabled Web Service, נקרא לו CarRentalService ונגדיר את המחלקה Car:

public class Car
    {
        public string Name { get; set;}
        public int Model { get; set;}
        public List<Color> Colors { get; set;}
        public Art Art { get; set;}
        public bool IsInStock { get; set;}
        public int MilesPerGallon { get; set;}
        public int ListPrice { get; set;}
        public int CurrentPrice { get; set;}    }

    public class Color
    {
        public string ColorName { get; set; }
    }

    public class Art
    {
        public string ImageUrl { get; set; }
    }

וכמובן את השירות עצמו:

[ServiceContract(Namespace = "")]
public class CarRentalService
{
    [WebGet] 
    [OperationContract]
    public List<Car> GetRentalCars()
    {
        Car car1 = new Car
        {
            Name = "BMW",
            Model = 2009,
            Colors = new List<Color> { new Color { ColorName = "Blue" }, new Color { ColorName = "Black" } },
            Art = new Art { ImageUrl = "/Images/Bmw1.png" },
            IsInStock = true, 
            MilesPerGallon = 25,
            ListPrice = 50,
            CurrentPrice = 40
        };
        Car car2 = new Car
        {
            Name = "Fiat",
            Model = 2011,
            Colors = new List<Color> { new Color { ColorName = "Orange" }, new Color { ColorName = "Yellow" } },
            Art = new Art { ImageUrl = "/Images/Fiat.png" },
            IsInStock = true,
            MilesPerGallon = 30,
            ListPrice = 50,
            CurrentPrice = 60
        };
        Car car3 = new Car
        {
            Name = "Mercedes",
            Model = 2012,
            Colors = new List<Color> { new Color { ColorName = "White" }, new Color { ColorName = "Blue" } },
            Art = new Art { ImageUrl = "/Images/Mercedes.png" },
            IsInStock = false,
            ListPrice = 50,
            CurrentPrice = 60
            
        };
        return new List<Car>
        {
            car1, car2, car3
        };
    }

בסיס

כעת, נוריד את Jsrender מאתר הפרוייקט ב- GitHub ונוסיף לספריית Scripts.

נוסיף פריט חדש, דף HTML5, ונוסיף references ל- Jquery ו JsRender.

באופן כללי, ישנם תמיד 3 מרכיבים ביצירת תבנית:

1. התבנית עצמה.
   
2. אלמנט ה Html שיכיל את התבנית המלאה בנתונים.
   
3. קוד שיוצק תוכן לתבנית ומכניס אותה לאלמנט ה- HTML.

התבנית הינה קטע של Script עם טיפוס של text/x-jsrender בשם carRentalTemplate. שימו לב ל Syntax של JsRender בתוך התבנית, הכל במחרוזות, ויש התאמה לשמות המאפיינים ב Car, שם ושנת יצור, עטופים ב {{}}

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            {{>Name}} {{>Model}}
        </li>
</script>

בצורה זו (שימוש ב <), הנתון עובר HtmlEncoding, אם רוצים לבטל את זה ולהציג Html, משתמשים בנקודותיים:

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            {{:Name}} {{:Model}}
        </li>
</script>

אפשר גם לעשות מספר רץ במקום LI:

<script id="carRentalTemplate" type="text/x-jsrender">
        <div>{{>#index+1}} {{:Name}} {{:Model}}</div> 
</script>

בתוך ה BODY אנחנו רואים את ה'מיכל' – לשם נכניס את התבנית המלאה. במקרה זה מדובר ברשימה UL, והתבנית עצמה הינה אוסף של LI.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
   1:  
   2:     <script src="Scripts/jsrender.js">
   1: </script>
   2:     
   3:     <script id="carRentalTemplate" type="text/x-jsrender">
   4:         <li>
   5:             {{>Name}} {{>Model}}
   6:         </li>
   7:     
</script>
   1:  
   2:     
   3:     <script type="text/javascript">
   4:  
   5:         $.get("/CarRentalService.svc/GetRentalCars", "", function (data) {
   6:             var cars = data.d;
   7:             $("#carRentalList").html(
   8:             $("#carRentalTemplate").render(cars));
   9:  
  10:         }, "json");
  11:  
  12:     
</script>
</head>
<body>
    <ul id="carRentalList" />
</body>
</html>

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

כעת, אם נריץ את הדף נקבל את הפלט הבא:

• BMW 2009
• Fiat 2011
• Mercedes 2012
• BMW 2011

פשוט ונחמד. כעת בואו נראה כמה אפשרויות והרחבות.

אפשרויות

נוסיף קצת עיצוב לתבנית , הכל בעצם HTML ו- CSS במחרוזת:

<script id="carRentalTemplate" type="text/x-jsrender">
        <li>
            <div class ='caption'>
                {{>Name}} {{>Model}}
            </div>        
 </li>
    </script>

ב Car יש מאפיין IsInStock, בוליאני. JsRender תומך בתנאים בצורה של If-Else. אם IsInStock=true, נציג את הצבעים שניתן לבחור מהם, אם False, נציג הודעה.

{{if IsInStock}}
    <div class='available'>Available now!!</div>
{{else}}
    There are no cars currently for rent
{{/if}}

אפשר גם לבצע השוואות, לנתונים או למאפיינים:

{{if Model > 2010}}
        Premium
{{else}}
        Vintage
{{/if}}

אגב, באותה שיטה אפשר לשאול על null:

{{if Color}}
    Not Null
{{else}}
    The instance is null
{{/if}}

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

<div >Miles Per Gallon: {{>MilesPerGallon || 'No Data'}}</div>

כעת, אם יש רכבים להשכרה, כלומר IsInStock=true, נרצה להציג את כל הצבעים לבחירה.
שימו לב שהאובייקט Car מכיל מערך של אובייקט אחר, Color. במקרה של מערך אנחנו יכולים להגדיר לולאה בתוך התבנית, רק צריך לציין את שם המאפיין שמחזיק את המערך, במקרה זה Colors

{{for Colors}}
   <li>{{>ColorName || 'No color available'}}</li> 
{{/for}}

אפשר לשלב נתונים דינמיים ממש בתוך ה Html, למשל, נרצה שכל שם של צבע יהיה בצבע המתאים:

{{for Colors}}
     <li> 
<div style='color:{{>ColorName}}'>{{>ColorName || 'No color available'}}
</div>
     </li> 
{{/for}}  

נריץ כעת ונקבל את הפלט הבא:

לסיכום

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

יש לכם עוד שאלות בנושאי פיתוח לווב? היכנסו לפורום Web Development שלנו בעברית! 

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

בתאריך 25.6.2012 קיימנו במיקרוסופט ישראל יום עיון בנושא פיתוח אפליקציות מטרו לסביבת Windows 8 ובאמצעות טכנולוכיות וכלים שהרבה ממפתחי הווב מכירים: HTML5 ו- JavaScript.

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

ביום עיון זה, למדנו על עקרונות הפיתוח ל- Windows 8 ב- HTML5, ראינו איך ניתן לקחת את הידע והניסיון מעולם ה- Web לעולם ה- Desktop והבנו את ההבדלים בין העולמות. כמו כן הכרנו את WinJS – ספריית ה- JavaScript של מיקרוסופט המכילה פקדים ורכיבים המותאמים לסוג החדש של האפליקציות, ואת WinRT – שכבת ה- API החדשה לגישה ליכולות של Windows מקוד JavaScript.  

חלק ראשון - מבוא לתכנות בחלונות 8

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

במהלך ההרצאה אלעד סקר את מבנה אפליקציות HTML5 ו- JavaScript ואת האלמנטים הבסיסיים לפיתוח אפליקציות מטרו ל- Windows 8. בנוסף, הכרנו את WinJS ו WinRT – הספריות המשמעותיות ביותר עבור מפתחי HTML5 לחלונות 8 ולמדנו על הדרך בה הן משולבות באפליקציית JavaScript.

חלק שני - WinJS ו WinRT לעומק

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

כאן צללנו לעומק של חלקים נרחבים בתוך WinJS ו- WinRT – למדנו איך לעבוד עם פקדים, DataBinding ו- Templates, וראינו איך משתמשים ב- Microsoft Blend על מנת לעצב את האפליקציה וכמובן על כל הכלים החדשים ש- Visual Studio 2012 מציע לנו.

הכנסו לפורום החדש של Windows 8 בעברית והעזרו במומחי הקהילה בנושאי פיתוח אפליקציות חלונות 8!

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

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

שנת 2012 היא שנה שבה אתם צריכים לקבל החלטה, האם להמשיך לפתח ולתחזק את האתר ב-ASP.NET Web Forms או לעבור ל-MVC. ביום עיון זה הכרנו את ההבדלים בין ASP.NET MVC לבין Web Forms במספר תחומים: מהירות פיתוח, פשטות, הפרדות ויכולות של בדיקות אוטומטיות.כמו כן ראינו שהעבודה עם MVC, Entity Framework, HTML 5 בויזואל סטודיו מאפשרת לבנות אתרים שעומדים בכל האתגרים החדשים שהשווק מציב בתקופה זו.

חלק ראשון – ASP.NET MVC לעומת Web Forms

מה זה ASP.NET MVC?
במה זה שונה מ- ASP.NET Web Forms
איך מפתחים עם זה UI מורכב, אם אין פקדים? איפה ה-GRID שלי?
MVC & HTML 5  סיפור האהבה.

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

חלק שני - ASP.NET MVC ו- Entity Framework ועוד

איך כותבים AJAX עם MVC?
איך כותבים Validations בצד השרת וה-Client.
MVC ו- Entity Framework סיפור האהבה.

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

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

יש לכם שאלות נוספות? כנסו לפורומים שלנו בעברית ב- MSDN!

מיקרוסופט , בשיתוף Empeeric ו- Tel Aviv JavaScript Meetup יקיימו בסוף הבא את מרתון הפיתוח הראשון של אפליקציות HTML5/JavaScript ל- Windows 8. ההאקאטון, שיתקיים במשרדי Empeeric במרכז תל אביב, יתחיל ביום חמישי בשעות הבוקר ויסתיים ביום שישי לפני כניסת השבת.

מרתון הפיתוח החינמי, מוקדש לפיתוח אפליקציות מטרו ל- Windows 8 באמצעות HTML5 ו- JavaScript בלבד, ובאפליקציות שיפותחו בו ינתן פוקוס מיוחד לעיר תל אביב: מסעדות בתל אביב, סרטים בתל אביב, חדשות מתל אביב וכו’. גם הפרסים יהיו ברוח העיר תל אביב ויתנו בחסות מיקרוסופט ישראל ו- Rozen & Meents.

>> הרשמה ל- App-a-thon

מי יהיה שם?

מפתחי צד לקוח ב- HTML5 ו- JavaScript המעוניינים לבנות אפליקציות מדליקות ל- Windows 8.

למה אפשר לצפות?

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

איפה ומתי?

31 במאי עד ה- 1 ביוני (חמישי-שישי)

משרדי Empeeric, רח’ הארבעה 10, תל אביב (קומה 4)

תחרות האפליקציות ופרסים שווים

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

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

תוכנית ה- App-a-thon

יום חמישי, ה- 31 למאי

11:00 התכנסות וארוחת בוקר
11:30 הרצאה: מבוא לפיתוח אפליקציות מטרו ב- HTML5 / JavaScript, סקירת כלי הפיתוח ואפליקציה לדוגמא.
13:00 סיעור מוחות וחלוקה לצוותי עבודה
13:30 עד הלילה – פיתוח האפליקציות

יום שישי, ה- 1 ביוני

10:00 חוזרים לפתח
14:00 הצגת האפליקציות
16:00 תחרות אפליקציות וחלוקת פרסים
17:00 Happy Hour

מה להביא או להכין מראש?

• להביא לפטופ עליו מותקנת גירסאת ה- Consumer Preview של Windows 8. אפשר להתקין כ- Dual Boot על Windows או על לינוקס, לבצע Boot into VHD אם יש לכם Windows 7 או להרים מכונה וירטואלית מעל VirtualBox.
• להתקין את הגירסא החינמית של כלי הפיתוח: Visual Studio 11 Express for Windows 8 על סביבת ה- Windows 8 מהסעיף הקודם.
• לבצע את בניית אפליקציית מטרו לניוזגיק עבור Windows 8 עםJavaScript ו-HTML5.

שאלות נוספות?

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

נתראה שם!

בתאריך 19.3.2012 קיימנו במיקרוסופט ישראל את יום העיון השני בנושא פיתוח אפליקציות מטרו לסביבת Windows 8 והפעם על הפרק: כיצד לפתח אפליקציות מטרו באמצעות שימוש בכלים שכל מפתח ווב מכיר: HTML5 ו- JavaScript.

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

ביום עיון זה, למדנו על עקרונות הפיתוח ל- Windows 8 ב- HTML5, ראינו איך ניתן לקחת את הידע והניסיון מעולם ה- Web לעולם ה- Desktop והבנו את ההבדלים בין העולמות. כמו כן הכרנו את WinJS – ספריית ה- JavaScript של מיקרוסופט המכילה פקדים ורכיבים המותאמים לסוג החדש של האפליקציות, ואת WinRT – שכבת ה- API החדשה לגישה ליכולות של Windows מקוד JavaScript.  

חלק ראשון - מבוא לתכנות בחלונות 8
 

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

במהלך ההרצאה אלעד סקר את מבנה אפליקציות HTML5 ו- JavaScript ואת האלמנטים הבסיסיים לפיתוח אפליקציות מטרו ל- Windows 8. בנוסף, הכרנו את WinJS ו WinRT – הספריות המשמעותיות ביותר עבור מפתחי HTML5 לחלונות 8 ולמדנו על הדרך בה הן משולבות באפליקציית JavaScript.

חלק שני - WinJS ו WinRT לעומק

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

כאן צללנו לעומק של חלקים נרחבים בתוך WinJS ו- WinRT – למדנו איך לעבוד עם פקדים, DataBinding ו- Templates, וראינו איך מממשים contracts של חלונות 8 כמו חיפוש ו Share.

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

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

בתאריך 9.2.2012 קיימנו במיקרוסופט ישראל ברעננה יום עיון בנושא:
Build Modern WebApplications with HTML5, CSS3 and JavaScript
שעסק בנושא החם ביותר היום – HTML5, התקן החדש שנבנה בימים אלו לבניית מערכות אינטרנטיות.
כל מפתח WEB חייב להכיר את שפת התגיות HTML על מנת לעצב את מבנהו של התוכן המוצג על גבי דפי אינטרנט ותקן HTML5 כולל בתוכו שינויים רבים שיאפשרו (וחלקם מאפשרים כבר היום) לשנות את כללי המשחק בבניית מערכות אינטרנטיות אשר מבוססות HTML, JavaScript וCSS.

חלק א' של יום העיון: פיתוח אפליקציות WEB באמצעות HTML5, CSS3, ו- JavaScript

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

קישור ישיר להורדת הסרטון.

חלק ב' של יום העיון: HTML5 API’s

בחלק זה של המפגש דנו ב API's החדשים בהם HTML5 עושה שימוש כגון: Canvas, Geolocation, Web Storage ועוד.

קישור ישיר להורדת הסרטון.

המצגת וחומרים מיום העיון נתנים להורדה כאן.

מיקרוסופט ממשיכה בגישתה ה-אג'ילית (Agile) כלפי ASP.NET MVC ומוציאה גרסת Developer Preview ל- ASP.NET MVC 4. גרסא 4 מצטיינת בשיפורים ושכלולים המאפשרים לנו להביא את עולם ה-Mobile אל תוך פיתוח ה-Web תוך שמירה על המודל התכנותי אליו התרגלנו ב- ASP.NET MVC. אם תהית כיצד נראה הפיתוח בעזרת jQuery Mobile הרי שגרסת ASP.NET MVC 4 הינה כלי מצוין לבחון שיטת פיתוח שכזו המאפשרת לנו ליצור אפליקציות Cross Platform המסוגלות לרוץ על iPhone, Android וכן Windows Phone.

יום העיון בנושא ASP.NET MVC 4 שהתקיים ב- 30.1.2012 מחולק לשני חלקים מרכזיים:

בחלקו הראשון הוצגו המרכיבים המרכזיים של ASP.NET MVC וכיצד הם מייצרים חווית פיתוח מרשימה.

קישור ישיר להורדת הסרטון  

בחלקו השני הוצגו רשימת החידושים של גרסא 4 לרבות: Mobile Project Template, Display Modes, jQuery Mobile, View Switcher, Recipes, Task Support for Asynchronous Controllers.

קישור ישיר להורדת הסרטון

הורדת הדמויים והמצגת

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

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

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

PhoneGap מציעה “מעטפת” אפליקטיבית אשר מאפשרת לכם לפתח אפליקציה אחת, באמצעות HTML5, CSS ו- JavaScript, אפליקציה אשר ניתן להמיר אותה בקלות לכל פלטפורמה אשר נתמכת על ידי הכלי.

כיום, הפלטפורמות הנתמכות על ידי PhoneGap הן Windows Phone, Android, iOS, Symbian, Blackberry,WebOS, Samsung Bada והיד עוד נטויה לפלטפורמות עתידות לבוא.

הרעיון מאחורי PhoneGap

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

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

אז איך זה עובד

כאשר אתם מפתחים אפליקציה באמצעות PhoneGap, כל מה שנדרש ממכם הוא להכיר את טכנולוגיות הפיתוח לווב: HTML, JavaScript ו-CSS ואת התשתית האפליקטיבית הרלוונטית ש-PhoneGap מציעה לכם הממומשת באמצעות ספריות JavaScrip.

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

כיצד מפתחים באמצעות PhoneGap

הקונספט שאליו כיוונו מפתחי הפרוייקט הוא Build Once, Deploy Every Where.

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

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

שלב ראשון – פיתוח האפליקציה בסביבה הנוחה לנו.

כאן יש לנו מספר אופציות:  אנו יכולים להשתמש בכלי ובפלטפורמה המועדפים עלינו. במקרה שלנו זה Visual Studio, לכן נוריד את ה- Windows Phone SDK ונוריד את ספריות PhoneGap המותאמות ל- Visual Studio ומגיעות בתור Solution נוח לעבודה. אם היינו מפתחי אנדרויד למשל, היינו יכולים להוריד את ה- SDK המתאים ולעבוד עם Eclipse.

האופציה השנייה העומדת לרשותנו, היא שימוש בשירות שנקרא PhoneGap:Build. למעשה, כל שנדרש מאיתנו כאן זה להעלות קובץ זיפ המכיל את קבצי האפליקציה שלנו (שכאמור מורכבים מ- HTML, CSS, JS בלבד). השירות בענן יאפשר לנו לקמפל את האפליקציה בצורה אוטומטית לכל הפלטפורמות ולהכין אותן להפצה ל- Marketplaces השונים. בלי התקנות SDK ו- IDE’s שונים על המחשב וכו’. מאד נוח. המפתחים קוראים לזה Compile In the Cloud, Run Anywhere.

כיוון ש- PhoneGap מציעה API, אנו מתחילים לראות חברות צד שלישי אשר מציעות כלי פיתוח שונים, חלקן בענן, המבצעות אינטגרציה לשירותי PhoneGap ו- PhoneGap Build Cloud. אחת מן הדוגמאות הטובות היא Application Craft.

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

שלב שני – העברת האפליקציה לפלטפורמות השונות.

אם פיתחנו באמצעות כלי ספציפי עבור בשימוש SDK ספציפי, למשל בדוגמא שלנו VS + WP SDK, אזי  כרגע למעשה יש לנו אפליקציה מקומפלת אשר מתאימה לפלטפורמה אחת בלבד. אך אל דאגה - כיוון שהשתמשנו למעשה במעטפת אפליקטיבית של PhoneGap, תהליך העברת האפליקציה לפלטפורמות אחרות הולך להיות מאד קל. כל מה שנצטרך לעשות הוא לפתוח את ה- Pacakge שנוצר בכלי האחר, לקמפל אותו – ויש לנו אפליקציה המותאמת לפלטפורמה עליה קימפלנו.

אם פיתחנו באמצעות ה- PhoneGap Build Cloud או שירות צד שלישי דומה, אזי כבר העבודה בוצעה – כלים אלו יודעים לקמפל את האפליקציה As a Service עבור הפלטפורמות השונות ולא נדרשת מאיתנו עבודה נוספת.

PhoneGap ו- Windows Phone

כבר בספטמבר 2011 מיקרוסופט הודיעה על תמיכה בפרוייקט PhoneGap, במסגרת תמיכתה בקידום סטנדרטים לפיתוח ווב ומובייל ותרומתה לפרוייקטים כגון  HTML5 ו- jQuery Mobile. אנו רואים את התוצאות ב-IE9 אשר תומך בסטנדרטים אלו ואנו רואים את זה בפרוייקטים כמו PhoneGap ובשיתופי פעולה של מיקרוסופט בנושא עם חברות כמו IBM, Adobe ו- RIM.

אנו שמחים לראות שהמאמצים נשאו פרי ולפני כשבועיים סוף סוף שוחררה גרסת PhoneGap 1.3 אשר הכילה תמיכה בפיתוח אפליקציות Windows Phone. 

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

מלבד הפונקציות הבסיסיות המתוארות מעלה, מפתחים יכולים להנות ממגוון פלאגינים והרחבות המאפשרים תמיכה ברשתות חברתיות – Facebook, LinkedIn, Twitter, Windows Live, וכמובן אינטגרציה הדוקה עם Visual Studio גם בגרסאותיו החינמיות.

פיתחנו אף עוד הרחבות אשר מאפשרות למפתחי HTML5 להנות מהפיצ’רים היחודיים של Windows Phone כגון Live Tile Update וחיפוש מפות Bing.

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

להדגמת פיתוח קצרה באמצעות Visual Studio ו- PhoneGap על איך מפתחים אפליקציית מצלמה המותאמת ל- Windows Phone 7 ואנדרויד ב-3 דקות!.. הסתכלו בסרטון הזה. הקוד ניתן להורדה מכאן והפלאגינים שנעשה בהם שימוש נמצאים כאן.

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

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

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

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

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

כמו הרבה התנסויות שלנו להיות בחזית הפיתוח לווב ולפתח את הרשת צעד אחד קדימה, גם כאן עבדנו בשיתוף פעולה עם מתכנתי ווב מהשורה הראשונה על מנת שנצליח להביא את חווית המשחק העשירה אל הדפדפן כולל כל ההתנהגות הפיזיקלית והתנועתיות והאישיות היחודית של המשחק אל הדפדפן ולהריץ את המשחק כאילו היתה אפליקציית Native, וזה לא היה פשוט – המשחק כולל בגרסתו לאייפון  מעל ל- 15,000 שורות קוד ב- Objective-C לא כולל ספריות קוד. לשמחתנו הצלחנו והמשחק בגרסתו לדפדפן בנוי כולו ב- HTML5 בלבד וכל מה שאתם צריכים על מנת להריץ את המשחק זה דפדפן מודרני והרבה זמן חופשי..

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

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

נסו את Pirates Love Daisies, Disney Tron ואת The World’s Biggest Pacman על מנת לראות מספר דוגמאות של שימושים כיפיים בטכנולוגיות ווב מתקדמות. אנחנו מתרגשים להוסיף את  Cut The Rope לרשימה ולהביא את עושרה של אפליקציית האינטרנט הזאת שרצה בדיוק כמו אפליקציית Native.

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

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

אל תשכחו להוריד את IE9 מכאן ואת המשחק מכאן.

תהנו.

 

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

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

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

תהנו!

מיקרוסופט שחררה השבוע את גירסת המפתחים הרביעית (Platform Preview 4) לאינטרנט אקספלורר 10. הגירסא ניתנת להתקנה על ה- Windows 8 Developer Preview בלבד, מוסיפה טכנולוגיות HTML5 מתקדמות ומציגה שיפורי ביצועים .

השבוע שוחררה גירסא 1.0 של jQuery Mobile, תשתית קוד פתוח לפיתוח אפליקציות Web למובייל בטכנולוגיות Web, המאפשרת להגיע באמצעות HTML5, JavaScript ו- CSS לכל סוגי המכשירים הניידים.  בזכות שיתוף פעולה בין מיקרוסופט לקהילת הקוד הפתוח האחראית לפיתוח וקידום הפרוייקט, קיימת תמיכה מובנית ל- Windows Phone, הכוללת בין היתר אופטימיזציית ביצועים משמעותית.

כדאי לקרוא מספר מדריכים בעברית להכירות עם jQuery Mobile:

• מדריך jQuery Mobile - צעדים ראשונים
• מדריך jQuery Mobile - ניווט וכפתורים
• מדריך jQuery Mobile – רשימות

גירסא 1.0 של jQuery Mobile כבר זמינה כחבילת Nuget וניתנת להתקנה בקלות בתוך Visual Studio:

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

תהנו!