או- למה <video> ו-<audio>  משעממים

או- פלטפורמטת הווב החדשה

או- הקדמה לHTML5

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

תרגום מאמר מאת Joel Martin (kanaka)

קצת פרספקטיבה

הלידה של הווב

לפני 20 שנה (6 אוג', 1991), טים ברנס-לי שחרר את ה-World Wide Web לעולם, בזמן שעבד בCERN-. למעשה, מה שהוא שיחרר הייתה תוכנה שנקראה "WorldWideWeb" שלאחר מכן שונתה לשם "Nexus" על-מנת ליצור הבדלה בין הקונספט של World Wide Web והדפדפן.

הדפדפן ההתחלתי היה יכול לרנדר מסמכים אשר היו כתובים ב-HyperText Markup Language (HTML)‎. הHTML- הראשון תמך במספר מצומצם של פורמטי עיצוב ובהיפר-לינקים (כיום אנחנו פשוט קוראים להם לינקים) למסמכים אחרים. מוצג כאן צילום מסך, שנתיים לאחר מכן – כאשר התמיכה בצבעים ותמונות נוספה:

דפדפן WorldWideWeb מורץ על מערכת NeXT

התקומה של הווב

במשך 10 השנים הבאות "הווב" הופצץ במונחים של חדשנות, תקינות¹, מספר משתמשים, דפדפנים (התקנות וגרסאות), שרתי ווב (התקנות וגרסאות), והשפעה כלכלית. יחד עם השחרור של Mosaic(ב-NCSA) ב-1993, עם שילוב החלק בין גרפיקה לטקסט, ה- World Wide Web החל במהרה להיות השימוש הדומיננטי ביותר של האינטרנט והכוח המניע לאימוץ האינטרנט. למעשה, לרוב משתמשי המחשב "הווב" ו"האינטרנט" הפכו להיות מילים נפרדות.

הנפילה של הווב

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

התקומה של הווב (בפעם השנייה)

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

חלוקת השימוש בשוק הדפדפנים (Wikimedia)

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

"HTML5"

טכנית, HTML5 הוא מפרט של ה-²World Wide Web Consortium (W3C)‎. אנשים קפדנים רבים יטענו שזה השימוש היחידי שצריך להיות. לכל שאר האנשים, HTML5 הוא מושג שימושי לתיאור של השינויים המהירים שקורים בזמן הנוכחי לפלטפורמת הווב. לזה אני מתכוון כשאני משתמש במושג "HTML5". התייחסות למפרט של הW3C- תעשה באמצעות המושג "W3C HTML5".

W3C HTML5

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

W3C HTML5 זה שעמום המחץ

ה-W3C HTML5 הוא מאוד חשוב מצד אחד, אבל מצד שני הוא גם דיי משעמם. זה למעשה תיאור רשמי של כל הדברים העדכניים בפלטפורמת הווב בשלוש השנים האחרונות. התוכן של המפרט כתוב בצורה דיי יומיומית (בשונה מהאופי הטכני של מפרטים בדר"כ). הAPI- המעניין ביותר בW3C HTML5- הוא Canvas 2D והוא מוגדר במסמך נפרד.

W3C HTML5 הוא חשוב

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

W3C HTML5 נגד HTML5

אם נסכם את ההבדלים בין המפרט W3C HTML5 והקונספט הכללי של HTML5:

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

או בדרך אחרת נסכם את מערכת היחסים בין השניים:

מפרט הW3C HTML5- משמש כקרקע ומסגרת עליה כל פיתוחי ה-HTML5 המעניינים שקורים.

החלקים המעניינים ביותר בHTML5-

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

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

אז ללא הקדמה נוספת…

1. מנועי Javascript מהירים יותר

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

2. WebSockets

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

3. סוגי נתונים בינאריים (Typed Arrays ו-Blobs)

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

4. Web Audio API

   לא מדובר בתגית ה-<audio>, אלא בAPI-ים / הצעות לאפשר מניפולציות בסאונד ב-latency נמוך, באופן ישיר באמצעות Javascript. תגית <audio> (שהיא חלק מה-W3C HTML5) מאפשרת להטביע קובץ אודיו ישירות בדף האינטרנט ומציעה API להשמעה וסנכרון.

   ההצעות ל-Web Audio API מאפשרות יצירה ומניפולציה של סאונד באופן ישיר וגם מטפלות בבעיות של פסקול ב-latency גבוה שקיימות היום במימוש של תגית ה-<audio>.

   ההצעות הללו עדיין בשלבים ראשוניים ויתכן והפתרונות הסופיים יתאחדו לבסוף עם תגית ה-<audio>, אבל הבעיות שנפתרות ע"י ההצעות ל-Web Audio API יהיו חלק מעתיד הדפדפנים בצורה כזו או אחרת.

5. Canvas 2D Context

   מניפולציית פיקסלים בצורה ישירה. כולם מסכימים שזה חשוב אז אני לא אוסיף עוד הרבה. שמתי את זה מתחת ל-8iy-Web Audio API מכיוון ורוב הדברים שניתן לעשות עם Canvas 2D ניתן לעשות עם מתודות אחרות (SVG, WebGL, CSS3).

6. CSS3 ו-WOFF

   גיליונות עיצוב מדורגים 3 (3 Cascading Style Sheets) ופורמט הפונט הווב הפתוח (Web Open Font Format) מביאים יחד את העוצמה המלאה של עיצוב, טיפוגרפיה, layout ותזוזה ויזואלית לווב. כמו כן, עם CSS3 (במיוחד מודל ה-Flexible Box), אפליקציות ווב יוכלו ליצור עיצוב לממשק משתמש בצורה פשוטה וחזקה ללא הבלאגן הנדרש בCSS2- במיקום אלמנטים.

7. Local Storage, אפליקציות Offline ו-APIs לקבצים

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

8. Web Workers

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

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

   היכולת להיות מונע מאירועים מגיע לגבול מסוים. המפרט של Web Workers נוצר על-מנת לאפשר לאפליקציית ווב בודדת לקיים הרצות של מספר אשכולות של Javascript סימולטנית. על-מנת למנוע סיבוכיות שבדרך כלל מגיעה בתכנות בmulti-threaded (מנעולים, מבני נתונים מיוחדים וכ"ו), Web Workers הן יחידות Javascript עצמאיות והן יכולות לתקשר אחת עם השנייה ועם אשכול ה-Javascript הראשי באמצעות הודעות מבוססות אירועים.

9. SVG 1.1/2.0

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

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

10. WebGL

    WebGL הוא ה-Canvas 3D Context וזה למעשה – האצת חומרה באמצעות OpenGL APIבשביל הווב. בדומה לSVG, יש לו פוטנציאל להיות חלק חשוב מאוד מתוך ה-HTML5. אבל אמרתי פוטנציאלי מכיוון ומיקרוסופט מזלזלת בצורה מוסיימת ב-WebGL (יתכן מכיוון שהוא מוגדר במונחים של OpenGL ולא בAPI- שלהם - DirectX) ולכן קיימת אי-ודאות האם הטכנולוגיה תכנס לתוךInternet Explorer. אם לא היו האי-ודאויות הללו הייתי בוודאי ממקם את WebGL גבוה ברשימה מכיוון והטכנולוגיה הזו פותחת שער להרבה תחומי אפליקציות מעולמות חדשים (כמו משחקי 3Dלדוגמא).

11. כל השאר

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

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

    • WebRTC/Stream API: שיחות וידאו Peer-to-peer.
    • Geolocation: איפה אני בעולם?
    • Orientation: איזה כיוון זה למעלה?
    • Crypto: הצפנה/פענוח יעילים ב-Javascript.
    • WebCL: גרסת האינטרנט של OpenCL. מי לא היה רוצה להשתמש בGPU ישירות דרך תכנות ב-Javascript?
    • WebNotifications: תגיד לי מה קורה, אבל בעדינות.
    • Web Intents: סוגי נתונים אסוציאטיביים עם פעולות ברירת מחדל והעברת נתונים הלוך חזור בין אפליקציות ווב. אפליקציית ווב המעודפת עליך לעריכת תמונות תוכל לשתף את המידע לאפליקציית הווב שלך ליצירת מצגת. ונאמר אמן.
    • נראות דף: נסו לדמיין כמה אנרגיה העולם יחסוך עם כל האנימציות והסרטים יפסיקו להתרנדר בזמן שאתם לא מסתכלים עליהם.
    • requestAnimationFrame: עם פקודת setTimeout אתה מקבל 100 FPS או 2FPS(לרוב באותה שנייה). עכשיו תוכל לקבל באופן קבוע 30FPS. ויש הרבה יותר שמחה בעולם.
    • Microdata: ניתוח חד-משמעי של מידע מוטבע באמצעות מידע מובן למכונה.
    • וכו'
    • וכו' ³

    

    Mac נגד PC נגד דפדפן (מתוך xkcd.com)

מה לגביי <video> ו- <audio>?

תגיות <video> ו-<audio> הן ככל הנראה התגיות של HTML5 שגרמו להכי הרבה התרגשות (וחרדה) בווב בהקשר של HTML5. למעשה, חלק מכם כבר סרקו מראש וחיפשו אותם ברשימה והיו מופתעים לגלות שהם לא היו #1 ו-#2. שני האלמנטים הללו הן חלק מ-W3C HTML5 ולמרות שהן הפכו את השימוש המסורתי באלמנטים מדרג ב' (לדוגמא מה שנעשה באמצעות פלאש) לשימוש באלמנטים מדרג א', הן עדיין רק דרך טובה יותר לעשות משהו שכבר נעשה בעבר. תגיות <video> ו-<audio> לא מרחיבות בצורה משמעותית היקף היכולות של אפליקציות ווב וזו סיבה ראשונה לחוסר הנוכחות שלהן ברשימה. בעיה נוספת שיש בתגיות הללו שהרשימה של פורמטי המדיה הנתמכים שונה מדפדפן לדפדפן. עד שהבעיה הזאת תיפטר האימוץ של התגיות הללו יהיה קלוש⁴.

הערות שוליים

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

1. • 1995 - HTML 2.0 הופץ כסטנדרט הראשון של HTML.
   • 1995 - HTML עושה את צעדיו הראשונים לעבר הפיכתו לדינאמי ואינטראקטיבי כאשרJavascript נוצר ע"י ברנדן איך (Brendan Eich) ונוסף לדפדפן נטסקייפ (Netscape Navigator 2).
   • 1996 – ספציפקציית CSS1 (Cascading Style Sheets) מוכנה וחלקים ממנה מופיעים ב-Internet Explorer 3. חלק מהסיבה ל-CSS הוא ליצור הפרדה בין תצוגה של דף אינטרנט ומהתוכן והפונקציונאליות. בעקבות זה נוצר עיקרון במדעי המחשב של הפרדה בין חלקים.
   • 1998 – ספסיפיקציית DOM שלב 1 (DOM Level 1 - Document Object Model), ה-API של אלמנטי HTML בעמוד, שוחרר ע"י W3C.
2. אני צריך לציין עוד קבוצה חשובה (עם שם ארוך ונוטה לשיכחה) שמעורב בסטנדרט של HTML, הקבוצה Web Hypertext Application Technology Working Group (WHATWG). רבים (אולי כל) האנשים שנמצאים ב-WHATWG ומשתתפים בעבודה ב-W3C. ה-WHATWG יכול להיחשב כיותר דינאמי ופחות נוקשה מאשר ה-W3C.ה-WHATWG שומרת על מסמכי סטנדרטי-על. הראשון הוא HTML. רבים מהרעיונות שנמצאים ב-W3C HTML5 נכתבו לראשונה שם. המסמך הזה יכול להיחשב גם כ-HTML5+. הסטנדרט השני נקרא Web Apps 1.0. הוא מכיל את התוכן של מסמך ה-HTML ומוסיף רבים מה-APIsשנחשבים לאלה שגורמים לווב להיות פלטפורמה אפליקטיבית לכל דבר.מסמך WHATWG Web Apps 1.0 כבר הרבה יותר קרוב למה שאנשים מתכוונים כאשר הם משתמשים במושג "HTML5", עם זאת, אפילו זה לא מתמצת את כל המשמעות הטמונה בו. יש עוד APIs רבים והצעות שהם חלק מהאנרגיה החדשה של הווב שהם כבר עכשיו בדרך או עתידים להיות בדרך להיטמע ברוב הדפדפנים (באמצעות תהליך הסטנדרטיזציה או בלעדיה).
3. וכו'. אני עדיין לא מכיר הצעה/API עם שלושת האותיות האלה. השאלה היא האם המאמר הזה יגרום לכך שיהיה יותר סיכוי או פחות סיכוי שיהיה כן כזה בקרוב?
4. ע"י שילוב של Javascript מהיר, WebSockets, Canvas, Web Audio וסוגי מידע בינארי נוכל לקבל וידאו ואודיו ללא תגיות ה-<video>/<audio> וללא תוספים (Plugins). ה-frame rateוהרזולוציה יכול להיות נמוכות מהרצוי אבל זה אפשרי.

מקורות

• Dive Into HTML5
• HTML5Rocks
• Excellent Presentation on HTML5 from HTML5Rocks
• When can I use… Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
• HTML5 Readiness - Flower chart of HTML5 & CSS3 features in major browser versions
• The HTML5 Test - How well does your browser support HTML5?
• The Web Platform: Browser technologies ()
• HTML5 Tweets
• W3C Blog
• WHATWG Blog
• Google Chrome Blog
• Mozilla Firefox Blog
• Opera Developer Blog
• Microsoft Internet Explorer Blog
• "An Open Web" book
• "20 Things I Learned About Browsers and The Web" Google comic
• "What is HTML5"

לינקים

• Early History of the Web (W3C)
• Where the web was born (CERN)
• W3C
• W3C HTML5
• WHATWG
• WHATWG HTML
• WHATWG Web Apps 1.0
• 1. EcmaScript/Javascript: ECMA-262
• 2. WebSockets
  • API: W3C, WHATWG
  • Protocol: IETF/HyBi
• 3. Binary Data Types
  • Typed Arrays
  • Blob Type
• 4. Web Audio: Google, Mozilla, W3C
• 5. Canvas 2D Context: W3C, WHATWG
  • CSS3: W3C
  • WOFF: W3C
  • Web Storage: W3C
  • IndexedDB: W3C
  • Offline Applications: W3C, WHATWG
  • File/Reader: W3C
  • File Writer: W3C
  • File Dir/System: W3C
• 6. CSS and WOFF
  • W3C 1.1
  • SVG 2.0 W3C Roadmap
• 7. Local Storage, Offline Application and the File APIs
  • WebRTC/Stream API
  • Geolocation
  • Orientation
  • Crypto
  • WebCL
  • WebNotifications
  • Web Intents
  • Page Visibility
  • requestAnimationFrame
  • Microdata
• 8. Web Workers: W3C, WHATWG
• 9. SVG 1.1/2.0:
• 10. WebGL
• 11. All the Rest
• websockify – WebSocket to TCP socket proxy/bridge -https://github.com/kanaka/websockify
• noVNC – HTML5 VNC Client - https://github.com/kanaka/noVNC

מאמרים נוספים:

• Zend Framework – דרך טובה לבנות מערכות PHP
• שני מפגשים שלא כדאי לפספס בפברואר

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

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

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

מאמרים נוספים:

• מה הפונט? גילוי פונט לפי תמונה
• סעור מוחות באמצעות Mind42

שיפור הדרגתי (Progressive Enhancement) – גישור הפער בין CSS2 ו-CSS3 – זהר ארד

מצגת ההרצאה:

להורדת הקובץ בפורמט PDF

Accessibility with CSS – Lisa Seeman

מצגת ההרצאה:

להורדת הקובץ בפורמט PPT

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

מצגת ההרצאה:

להורדת הקובץ בפורמט PDF

introduction to CSS3: a showcase of things to come – Akiva Levy

עוד באותו נושא:

• סיכום מפגש מפתחים מס' 3 – W3C ישראל
• מפגש #3 בסדרת מפגשי פורום המפתחים של ה-W3C בישראל – עיצוב אתרים מבוסס CSS

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

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

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

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

המרצה הראשון, זהר ערד, הקסים, אני חושב את כולם, בהרצאתו בו סיפר על שיטת בניית האתרים "Progressive Enhancement". אני חייב להודות שלא שמעתי על הרעיון של הפרוגרסיב הננסמנט לפני ההרצאה ואני חושב שיש ברעיון הזה הרבה אמת וצדק. בשתי מילים, פרוגרסיב הננסמנט בבניית אתרים זו תורה שאומרת: כל אתר שמפתחים מפותח על מנת שיתאים ל100% מהדפדפנים אבל לא בהכרח יראה שתי טיפות מים בכל הדפדפנים. בתורה הזאת, דפדפנים בתומכים ביותר דברים (כמו למשל css3 או html5) יצ'ופרו בפיצ'רים מגניבים יותר, אבל שימו לב חשוב ש-100% מהפונקציונאליות תשמר בכל הדפדפנים. ההרצאה של זהר, נתנה דוגמאות קלילות לאיך לעשות את זה ובאופן כללי הייתה לעניין והועברה בצורה טובה, אני נהנתי מאוד.

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

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

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

מקומם של הפונטים בעולם האינטרנט

המצגת:

לינקים קשורים:

• http://www.w3.org/Talks/2010/0313-Fonts-SXSW/ - הרצאתו של ברט בוס על ההיסטוריה של פונטים.
• Fuck the foundries – פוסט עצבני שקורא להשתמש בפונטים פתוחים
• onlinefontconverter.com – ממיר פורמטי פונטים אונליין

טכניקות להחלפת פונטים:

• sIFR – וכן לינק למימוש של sIFR בעברית
• FLIR
• Cufon – וכן לינק למימוש של Cufon בעברית

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

עוד באותו נושא:

• מפגש #3 בסדרת מפגשי פורום המפתחים של ה-W3C בישראל – עיצוב אתרים מבוסס CSS
• מצגות וקטעי וידאו ממפגש המפתחים השלישי

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

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

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

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

מצורפת כאן תוכנית המפגש מתוך אתר הW3C הישראלי:

תוכנית המפגש

תגית בטוויטר: #w3cdf

מצפה לראותכם במפגש, שווה לבוא!

עוד באותו נושא:

• סיכום מפגש מפתחים מס' 3 – W3C ישראל
• מצגות וקטעי וידאו ממפגש המפתחים השלישי

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

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

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

למה אנחנו צריכים את זה?

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

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

כיצד זה עובד?

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

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

1. הגדרת קבצי האתר שישמרו ב-catch באמצעות קובץ manifest.
2. שמירת נתוני הגולש באמצעות אובייקט localStorage.
3. טיפול בהתחברות והתנתקות הגולש באמצעות אירועי התחברות-התנתקות.

קובץ manifest

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

כפי שאתם רואים, הקובץ מכילה רשימה של קבצים שאותם אני מעוניין לשמור במחשב הגולש לאפשרות בו הוא יעבוד במצב לא-מקוון. שמרתי קובץ תמונה, קובץ CSS, קבצי JS וקובץ htm. השורה השלישית היא כמובן הערה, חשוב לשים לב שהדפדפן פיירפוקס ישמור את רשימת הקבצים שמופיעים במאניפסט רק בפעם הראשונה שהוא מגיע לאתר ובכל פעם שנוצר שינוי בקובץ המאניפסט, כך שאם עדכנתם קובץ ואתם מעוניינים שהדפדפן ישמור מחדש את הקבצים ב-catch שנו פרט כלשהו בקובץ המאניפסט, לדוגמא: שנו את הערת הגרסה ל"v3".

לאחר שהבנו את הנקודה הזו נעבור לנקודה השנייה.

שמירת נתונים במחשב הגולש

ישנן שתי דרכים לשמור נתונים במחשב הגולש:

• window.sessionStorage – שמירת נתונים כל עוד הדפדפן פתוח. ברגע שייסגר ימחקו כל הנתונים.
• window.localStorage – שמירת נתונים לאורך זמן. הנתונים ישמרו גם לאחר יציאה מהדפדפן ואף כיבוי המחשב.

לשני האובייקטים הללו ישנם אותן פעולות ומאפיינים:

• setItem(שם מפתח, ערך) – הוסף או עדכן ערך באובייקט האחסון.
• getItem(שם מפתח) – אחזור ערך מתוך אובייקט האחסון.
• removeItem(שם מפתח) – מחיקת ערך מתוך אובייקט האחסון.
• length - מספר הערכים ששמורים.
• key(אינדקס) – שם המפתח באינדקס.
• clear() – אתחול אובייקט האחסון (מחיקת כל הערכים).

לדוגמא:

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

אירועי אונליין/אופליין

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

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

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

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

סיכום ודוגמא

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

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

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

עוד באותו נושא:

• הוספת כתוביות לתגית וידאוAdding subtitles to a video tag
• HTML 5 – מה נכנס ומה יוצא? – חלק ב'

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

"פיתוח אתרים ואפליקציות מבוססות טכנולוגיות סמנטיות"

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

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

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

היום יפתח בשעה 16:30 וייחתם לאחר שלוש שעות, לפרטים נוספים והרשמה בקרו באתר W3C.השתתפות במפגש לחברי איגוד האינטרנט הישראלי, לא כרוכה בתשלום.

אני מאמין שיהיה מאוד מעניין וממליץ לכולם להגיע.

Web '10 – הכינוס ה-14 של איגוד האינטרנט הישראלי

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

היום הראשון-

• 22/2 – הרצאות מליאה:
  • אראל מרגלית, שותף מייסד קרן הון סיכון JVP
    עולם האינטרנט בעשור הבא:
    המפגש בין טכנולוגיה, תוכן ויצירתיות
  • Dr. Marc A. Smith, Chief Social Scientist
    Connected Action Consulting Group
    Analyzing Internet social media: visualizing social networks in (mobile) computer networks

• 22/2 – מושבים מקבילים בנושאים:
  • כסף יצירתי – מודלים עסקיים חדשים ויצירתיים באינטרנט ובסלולר
  • טכנולוגיות חדשניות שמניעות את האינטרנט
  • Over The Top ואומנות הצפייה בטלוויזיה
  • רשת האינטרנט העתידית
  • מתחברים לעולם נייד
  • רשת ביטחון וביטחון ברשת
  • רשתות חברתיות – מי גר שם?
  • לא חרדים לאינטרנט
  • ניטראליות הרשת או שימושים מנוהלים?

היום השני-

• 23/2 – טוטוריאל בנושאים:
  • Marc Grabanski, Web Developer, "Jack of All Trades"
    UI Development with jQuery and HTML5
  • IPv6 – from Theory to Reality
  • עולמות וירטואליים: גם לירוק וגם למקצוען

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

למידע נוסף והרשמה בקרו באתר הייעודי לכינוס השנתי או בטוויטר: #ISOCIL10. עלות ההשתתפות בשני ימי ההרצאה הוא 300 ש"ח לחבר האיגוד.

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

עוד באותו נושא:

• פורסמו ההקלטות והמצגות ממפגש ההעשרה של ISOC
• מפגש העשרה בנושא עתיד ה-Web – חלק שני

בזמן שלא הייתי כאן הייתי עסוק בבניית מערכת ניהול תוכן לחברת בניית האתרים שלי. את מערכת ניהול התוכן שלי בניתי ב-Zend Framwork שזהו Framework של PHP. מאוד נהנתי להשתמש בכלים שZF מעניקה, ורציתי לספר לכם קצת מה זה פריימוורק לPHP, מה זה ZF ולמה ומתי כדאי לכם להשתמש בהם בתכנות PHP.

Framework

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

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

Zend Framework

טוב עכשיו אחרי שסיברתי את אוזנכם קצת בנוגע לספריות הרחבה לשפות תכנות (framework), אני אספר לכם על Zend Framework.

הספרייה Zend Framework או בקיצור ZF היא ספריית PHP שפותחה ע"י זאב סורסקי ואנדי גוטמנס, מכאן שמה (זאב+אנדי = זאנד). יוצרי הסביבה הם ישראלים יוצאי טכניון שפיתחו בין השאר גם את שפת PHP (נחמד לא?). בדומה לPHP, מטרת הספרייה היא בניית אפליקציות אינטרנטיות. הספרייה רשומה בקוד פתוח ובנויה על סביבה מונחת עצמים עם הפרדת Model-View-Controller (בקיצור MVC).

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

• Model – זוהי השכבה שמכילה את אובייקטי המערכת המרכזיים (אלה שלא קשורים לתצוגה או לפעולה כלשהי), בשכבה הזו נבנה ונייצג כל אובייקט במערכת שלנו. השכבה הזו אינה מתממשקת באופן ישיר עם מסד הנתונים אך דרכה מתבצע הקישור. אני משתמש בשיטה ה-data mapper להתממשקות עם מסד הנתונים.
• View – שכבת התצוגה. בשכבה זו צריך כמה שיותר להמנע מכתיבת סקריפטים ותפקידה העיקרי הוא להציג את פלט הקוד שנוצר בשכבת ה-Controller.
• Controller – השכבה שבעצם מכילה את הפעולות של כל חלק באפלקציית האינטרנט. היא למעשה מחברת בין שכבות הModel והView בכך שהיא משתמשת במודולי המערכת ומעבירה מידע לשכבת התצוגה.

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

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

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

עוד באותו נושא:

• קוד קצר להצגת תוכן תיקייה
• ב-2010 אנחנו עוברים ל-Offline

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

picWin - גלריית פלאש עם טעינה מתוך XML

אפשרויות:

1. הוספת תמונות מתוך XML –
ניתן להוסיף תמונות לתוך קובץ pics.xml. כל תמונה תקבל את המאפיינים הבאים:

dir - התיקייה בה תמצא התמונה לפלאש (התמונה הקטנה)
big_dir - התיקייה בה התמונה ל-lightbox (התמונה הגדולה)
name - שם קובץ התמונה (בשני התיקיות!)
desc - יופיע כתיאור התמונה בתוך ה-lightbox.

2. תוכלו לשנות את מספר הריבועים בפלאש באמצעות שינוי שורה מספר 6 בקובץ project.fla:

החליפו את הספרה 5 במס' השורות הרצוי ואת הספרה 8 במס' העמודות הרצוי.

עוד באותו נושא:

• גלריית פלאש מתנה
• טעינת תמונות באמצעות jQuery

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

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

עוד באותו נושא:

• סיכום מפגש מפתחים מס' 3 – W3C ישראל
• מפגש #3 בסדרת מפגשי פורום המפתחים של ה-W3C בישראל – עיצוב אתרים מבוסס CSS