HTML5 הוא ה"קפיצה הגדולה קדימה" בתחום פיתוח טכנולוגיות ווב.
היכולות החדשות של HTML5, במקביל למירוץ החימוש בין הדפדפנים
המובילים, הפכו את מפתחי הצד הקדמי (Front End Developers או בקיצור ה
FEDs) לאנשי המקצוע המבוקשים ביותר בתעשייה. בואו ללמוד בצורה
מקצועית, בקורס השם דגש על תרגול והבנה מעמיקה, את מה שמיקרוסופט
וגוגל כבר בחרו כטכנולוגיה המנצחת בתחום הווב.
ניגע באלמנטים וביכולות החדשות, כגון וידאו ואודיו, לוקליזציה,
אחסון, שימוש בקנבס ועוד. במקביל, יפתחו הסטודנטים פרויקט מתגלגל
לאורך הקורס, בהתאם לסטנדרטים מקצועיים ברמה הגבוהה ביותר, על מנת
להגיע לרמת שליטה יישומית ומשביעת רצון ב - HTML5 על מגוון
יכולותיה.
הקורס הינו קורס רוחב מעמיק, הסוקר וצולל אל תוך הנושאים העיקריים
בפיתוח ה HTML5 כיום ברמה הנדרשת על מנת להיכנס לתחום, להתחיל לעבוד
ולהמשיך להתפתח מקצועית.
למי הקורס מיועד?
הקורס מכוון למפתחים מנוסים מרקעים שונים, כאשר המכנה המשותף הנמוך
ביותר הוא שליטה בסיסית ב HTML, CSS ו Javascript.
מפתחי צד-לקוח (Client-Side / Front-End)
מנוסים ששולטים ב HTML/CSS/JS ומתים כבר לפתח ב HTML5 אבל עוד לא
יצא להם, או שניסו פה ושם אבל רוצים ללמוד ולתרגל בצורה מסודרת.
מפתחי ווב (Server-Side / Back-End)
מוכשרים שיודעים HTML ולא חושבים ש Javascript זו שפה גסה. יהיה
לכם קצת קשה בנושאים שקשורים ל CSS, אבל אנחנו פה כדי לעזור.
מנהלי פיתוח
ששולטים במגוון טכנלוגיות ומעוניינים להוביל את הצוות והחברה שלהם
קדימה להישגים חדשים.
למה לי ללמוד בנטקראפט?
אכן, יש לא מעט קורסים תחת הכותרת "HTML5". אנחנו מכירים 90% מהם,
והם מכירים אותנו. חלקם אפילו לא טרחו לשנות את נוסח פסקת המבוא שלנו
כשהם עשו copy-paste. רוב הקורסים פונים למתחילים אך מכילים נגיעה
מועטה, אם בכלל, ב HTML5. מהסיבה הפשוטה שזהו לא נושא
למתחילים.
בנוסף, קיים הבדל מהותי בין ללמוד במוסד לימודי (טוב ככל שיהיה)
לבין ללמוד בחברה שמתעסקת יום-יום במה שהיא מלמדת.
רוצים עוד סיבות?
-
תרגול, תרגול, תרגול
40% מהקורס הוא עבודה מעשית, כותבים קוד. רק ככה לומדים. בכל שיעור
מתרגלים את מה שנלמד ובנוסף ניתן 3 שיעורי תרגול מלא בסגנון
"hackathon" כדי לתת פוש בפיתוח פרויקט הקורס.
-
פרויקט יחודי מושקע
כל תלמיד יזכה לפתח פרויקט יחודי ואישי, שמשלב את הטכנולוגיות
הנלמדות בקורס ומאופיין ומעוצב ע"י סטודיו ה-UX שלנו.
-
מרצים מובילים בתחום
מלבד יוגב אהוביה וסרג'
קרול שמובילים את התחום בנטקראפט, נארח מספר מרצים אורחים בעלי שם
ומומחים ל HTML5, משתתפים פעילים בקהילת המפתחים ומרצים מבוקשים בכנסי
פיתוח.
סילבוס הקורס
-
שיעור 1
על מה המהומה - Introduction & Boilerplate
אנחנו יודעים מה זה HTML, אבל מה זה בדיוק HTML5? נפזר את ענן הבאז והמסתורין ונראה את אבני היסוד הטכנולוגיים מאחוריהם, נכיר את הנפשות הפועלות - החברות, המפתחים והכלים המובילים בתחום, ונצא עם תשתית יציבה להמשך פיתוח הפרויקט.
-
שיעור 2
צעיר ומגניב - Sexy Semantics & Presentation
רגע לפני שהספידו אותו לטובת XHTML2, לבש HTML בגדים חדשים והכוונה היא לא לבגדי המלך. אלמנטים סמנטיים חדשים, CSS3 ו Web Fonts נותנים לנו משמעות וצורה איתן נבנה את העמוד הכי מגניב שיצא תחת ידינו עד כה.
-
שיעור 3
מפקדת פקדים - Applications Markup & Advanced Forms
עד כה התעסקנו רק באתרים, אבל ההבטחה הגדולה של HTML5 היא ביכולת ליצור אפליקציות עשירות באמצעות אותה תשתית מוכרת לכולם. Sliders, Progress bars וטפסים מתקדמים שעושים הרבה עבודה בשבילנו, יעזרו לנו להרכיב לוח פקדים עבור הפרויקט הבא שלנו.
-
שיעור 4
וידאו הרג את כוכב הפלאש - <video>
אחת הסיבות ששומעים ש"HTML5 יהרוג את הפלאש" היא התמיכה המובנית שלו בתגית video (וחוסר התמיכה של אפל בפלאש). נכיר את הפורמטים השונים והתפוצה שלהם, ונלמד כיצד הוידאו יוצא מחוץ לקופסה וניתן לשליטה באמצעות Javascript API ייעודי.
-
שיעור 5
סאונד ששון וסאונד שמחה - <audio>
הבשורה הכי משמחת לאוזניים מאז ה Sound Blaster היא API הסאונד החדש של HTML5. שליטה במה ששומעים באמצעות קוד, יכולת לסנטז צליל, לנתח אותו ולקשור אותו לאירועים באפליקציה היא לא פחות ממרתקת. נלמד את היכולות והמגבלות נכון להיום להוציא את האפליקציה שלנו מתוך ארבע פינות המסך.
-
שיעור 6
קנבס - <canvas>
עוד "מחסל פלאש" פוטנציאלי הוא לא יותר ממלבן ריק על המסך הטומן בחובו אפשרות לעשות הכל. לאחר שנתגבר על המחסום האמנותי נלמד לצייר, למדל, להזיז ולהגיב, וליצור משחק / דמו / אינטרקציה בגבולות הדמיון (והזמן).
-
שיעור 7
SVG
טכנולוגיה ותיקה שחוזרת למרכז הבמה היא שילוב של פורמט XML בתוך עמודי HTML, המאפשרת לצייר גרפיקה וקטורית, לייבא אובייקטים כמו iframe או וידאו לתוך העמוד, וליצור איתם אינטראקציה. התוצאה גמישה ומרשימה ומשלימה את יכולות הקנבס ביצירת עולם ויזואלי עשיר.
-
שיעור 8
שמירת נתונים - Storage
כמויות הלוגיקה והמידע בצד הקדמי של אפליקציות ווב הולכות וגדלות, ואיתן נולד הצורך לעבד את המידע בדרך נוחה ויעילה, ואף לשמור אותו מיידית בדפדפן/מערכת ההפעלה של המשתמש מבלי לפנות לשרת. נכיר את הטכנולוגיות Local storage, Web SQL ו Indexed DB, כיצד לבחור ביניהן ולרתום אותן לצרכים אלו.
-
שיעור 9
אנחנו כאן כדי להישאר - Offline
למרות שהווב הוא עולם מחובר יש יתרון מאוד גדול בלספק למשתמשים יכולת עבודה גם כאשר התנאים אינם מאפשרים חיבור לרשת. וחשוב מכך - את היכולת לסנכרן את המידע כאשר החיבור חוזר. ג'ימייל מובייל כבר עובד ככה, ונלמד איך עושים את זה גם.
-
שיעור 10
אפליקציה תלוית סביבה - Geolocation
ה Geolocation API מאפשר לאפליקציה שלנו לדעת היכן המשתמשים שלנו נמצאים ולהגיב בהתאם. בין אם זה תוכן ממוקד מיקום או סתם רקע בצבע השמיים של המשתמש, היכולת הזו מפיחה חיים במידע שאחרת הינו סטטי ומנותק מהעולם המוחשי.
-
שיעור 11
חיבור הווב למערכת הקבצים - File API
סט כלים נוסף שמטשטש את הגבולות בין אפליקציות ווב ונייטיב הוא ה File API, המאפשר להתחבר למערכת הקבצים או להעלות תיקיה שלמה לרשת ולאחר מכן לגשת למידע הבינארי של הקבצים ולהציגם מבלי לפנות כלל לשרת. יכולת זו משתלבת היטב עם תמיכה מובנית ב Drag and Drop, כפי שניתן לראות לאחרונה בג'ימייל.
-
שיעור 12
עבדים היינו - Web Workers
אחד החסרונות של Javascript כסביבת פיתוח מתקדמת היה מחסור ביכולת ביצוע משימות במקביל. בעיה זו מקבלת מענה באמצעות ה Web Worker Threads. דברים שלא היו אפשריים קודם כמו ביצוע חישוב מורכב מבלי לתקוע את הממשק, זמינים היום באמצעות API פשוט.
-
שיעור 13
מישהו שומע אותי - ה Web Socket
פתיחת ערוץ קבוע בין השרת לצד הקדמי שמאפשר שליחת הודעות בשני הכיוונים. שיטה זו ידועה גם כ Push - ולדוגמה מאפשרת לשרת להודיע לדפדפן כאשר מידע מסויים התקבל. יכולת זו בשילוב עם Notifications API תאפשר לנו לפתח אפליקציות שמאזינות למידע באופן הרבה יותר ישיר ופשוט.
-
שיעור 14
"והגדת לבנך..." - History API
ככל שמורכבות האתר או האפליקציה שלנו עולה, כך אנו מתרחקים מהמודל הפשוט של עמודים מקושרים שניתן לחזור אליהם בכל עת, לשמור במועדפים ולחלוק עם חברים. ה History API מחזיר את האפשרויות הבסיסיות והחשובות הללו גם לעולם אפליקציות הווב ונותן קפיצת מדרגה משמעותית מבחינת חווית המשתמש.
-
שיעור 15
כור היתוך - Cross Domain Messaging & Mashups
תקשורת בין אפליקציות או אתרים שנמצאים בדומיינים שונים תמיד היתה נושא כואב עקב מגבלות אבטחה. נלמד כיצד להשתמש ב Cross domain messaging בצורה מאובטת על מנת ליצור שילובים ואינטראקציות מפתיעים בין האפליקציות שפיתחנו בקורס.
-
שיעור 16
Mobile Web
אחד היישומים המרכזיים של HTML5 הוא הפיתוח למובייל. נלמד וננסה את הכלים והטכניקות הדרושים כדי להשתמש בידע שצברנו במהלך הקורס גם בזירה הזו.
מרגישים שזה בוער בכם ובא לכם כבר ללכלך קצת את הידיים?
אתם מוזמנים לנסות ולהשתעשע עם התרגיל הבא ולשלוח אלינו את התוצאות
- את הטובות ביותר אנחנו נפרסם. התרגיל ייתן לכם טעימה ממה שמצפה לכם
ומהרמה שאנחנו מצפים לה מכם (מדי פעם אנו נוהגים לתת את המשימה הזו
כמבחן למפתחי Front-End).
אז מה צריך לעשות?
המשימה היא פשוטה, לכאורה. אתם מקבלים מסך עם כפתור וכדור בלבד.
בשלב ראשון צריך ליצור את המסך הזה ב HTML/CSS, ובשלב שני תוסיפו
התנהגות, מה שבא לכם, שמי הדפדפן הם הגבול. זה נראה ככה:
את התוצאות תשלחו לסרג' קרול, בהצלחה!
:)