HTML5 presentation from a Matrix/TACT conference given lately by Oren Asayag, CTO at Matrix.

1. Oren Assayag- CTO matrix global

2. ‫מושגים‬ ‫5 ‪HTML‬‬
‫‪ - HTML ‬שפת קוד לבניית אתרי אינטרנט אשר ניתן להציג באמצעות דפדפנים תומכי .‪WWW‬‬
‫שפת קוד זו מראה לדפדפן כיצד להציג תוכן (טקסטואלי, תמונות ועוד) לגולשים. לכל סימן‬
‫בשפת הקוד הדפדפן מתייחס כאלמנט או תג. מרבית האלמנטים או תגיות מגיעים בצמדים כדי‬
‫להצביע על תחילת תוכן מסוים וסופו.‬
‫‪ - CSS ‬הגדרות עיצוב לדפי ‪ ,WEB‬התקן הוא חלק ממפרט של 4‪ .HTML‬המטרה - הפרדת‬
‫העיצוב מתוכן הדף.‬
‫‪ - DOM ‬ממשק ‪ API‬תוך שימוש ב-‪ ,OOP‬מטרת הממשק היא ייצוג אלמנטים של ‪ XML‬או‬
‫‪ HTML‬בצורה של אובייקטים.‬
‫‪ - JavaScript ‬שפת ‪ Script‬אשר רצה בהתאם לאירועים בצד הלקוח. היא ידועה בעיקר‬
‫בשימוש של שינוי ה-‪ HTML‬ללא גישה לשרת, הגישה לתוכן דף ה-‪ HTML‬נעשה ע"י שימוש ב-‬
‫‪.DOM‬‬

3. HTML 5
HTML5
=
HTML
+
CSS3
+
DOM3 and New JS API
3

4. ‫צרכני האינטרנט‬ ‫5 ‪HTML‬‬

5. WEB-‫התפתחות הטכנולוגיה בעולם ה‬ HTML 5
1991 – HTML
1994 – HTML 2
1996 – CSS1
1996 – JavaScript + Https
1997 – HTML 4
1998 – CSS2
2000 – XHTML 1
2002 – Tableless Web Design
2005 – AJAX (XmlHttpRequest)
… JavaScript Toolkits
… Ajax ToolKit
… JQuery
2004-2011 – HTML 5 ,CSS3

6. ? ‫הכרזה לתקינה מתי‬ HTML 5
http://www.w3.org/2007/03/HTML-WG-charter.html#deliverables: ‫מקור‬
W3C ‫ שלבים לאישור תקינה ב‬
Working Draft ‫1. טיוטה‬
Last Call Working Draft ‫2. טיוטה בקריאה אחרונה‬
Candidate Recommendation ‫3. מועמד להמלצה‬
Proposed Recommendation . ‫4. מסמך המוצע להיות המלצה‬
Recommendation ‫5. המלצה סופית‬
6

7. ‫אבולוציה‬ ‫5 ‪HTML‬‬

8. ‫אבולוציה דפדפנים‬ ‫5 ‪HTML‬‬

9. ‫אבולוציה מכשירים ניידים‬ ‫5 ‪HTML‬‬

10. ‫הווה, הבעיות על קצה המזלג‬ ‫5 ‪HTML‬‬
‫חוסר תאימות בין ‪ Parser‬של דפדפנים שונים(כולל גרסאות).‬ ‫‪‬‬
‫4 ‪HTML‬‬
‫‪Browser‬‬ ‫‪Parser‬‬
‫‪XHTML‬‬
‫)‪ World Wide Web consortium(W3C‬כאחראי על כתיבת הסטנדרטים.‬ ‫‪‬‬
‫המאפיין ‪ CELLSPACING‬כדוגמא לבעיה.‬ ‫‪‬‬
‫דפדפנים יוצרים תגיות/מאפיינים ‪ HTML‬משלהם כדי ליצור יתרון על דפדפן מתחרה.‬ ‫‪‬‬
‫‪ ‬התמודדות עם רזולציות שונות.‬
‫‪ ‬תקני ‪ XHTML/HTML‬לא תואמים את צרכי האינטרנט ולכן יש צורך להשתמש ברכיבי צד‬
‫שלישי כגון: ‪.applet, activx, flash, silverlight‬‬
‫כל מה שקשור לדינמיות , ציור , תלת מימד ואפילו וידיאו הגיע כתוספת ולא כתקן דבר‬ ‫‪‬‬
‫שייצר הבדלים משמעותיים בין ה-‪Parsers‬‬
‫01‬

11. ‫על 5 ‪ - HTML‬מטרות‬ ‫5 ‪HTML‬‬
‫3‪CSS‬‬ ‫‪‬‬
‫הורדה של תגיות עיצוב(>‪ )..<u><big><center><font‬והעברת העיצוב ל-3‪.CSS‬‬ ‫‪‬‬
‫‪New JS API‬‬ ‫‪‬‬
‫תקן חדש הכולל תגיות חדשות וישנות.‬ ‫‪‬‬
‫תמיכה בתקנים ישנים.‬ ‫‪‬‬
‫תצוגה זהה בכל הדפדפנים.‬ ‫‪‬‬
‫שיפורים עצומים בתחום הגרפיקה והמדיה(‪ -)Canvas, SVG, Video‬ללא צורך ברכיב צד ג‬ ‫‪‬‬
‫תגיות חדשות לעולם הטפסים הכלולים יכולות עיצוב חדשות.‬ ‫‪‬‬
‫זיהוי מקום(‪.)geolocation‬‬ ‫‪‬‬
‫ריבוי משימות(‪.)Workers‬‬ ‫‪‬‬
‫שימוש ב-‪ Client‬ככלי אחסון.‬ ‫‪‬‬
‫שיפור ביצועים.‬ ‫‪‬‬
‫היחידה שנשארה ממשפחת ‪ frame‬היא ‪.iframe‬‬ ‫‪‬‬
‫מבנה דף- ‪....footer ,header‬‬ ‫‪‬‬
‫11‬

12. ‫‪Web Storage‬‬ ‫5 ‪HTML‬‬
‫אחסון מידע בצד הלקוח‬ ‫‪‬‬
‫‪ -LocalStorage‬שמירת מידע ללא הגבלת זמן.‬ ‫•‬
‫‪ – SessionStorage‬שמירת מידע במהלך ‪. session‬‬ ‫•‬
‫(כבר לא יהיה בתקן /‪)http://www.w3.org/TR/webdatabase‬‬ ‫‪ – SQLStorage‬שמירת מידע מבנה טבלאי‬ ‫•‬
‫המטרה להחליף במצבים מסויים את ה-‪ cookie‬אשר כולל מספר חסרונות כגון:‬ ‫‪‬‬
‫מוגבל לאזור ה-‪.4K‬‬ ‫•‬
‫בעיות א"מ כגון ‪.CSS‬‬ ‫•‬
‫תעבורה גבוהה(נשלח לשרת בכל פנייה)‬ ‫•‬
‫יכול לחסוך את השימוש בשדות ‪.Hidden‬‬ ‫‪‬‬
‫המידע מאוחסן ‪port & per Domain‬‬ ‫‪‬‬
‫‪ ‬המידע נשמר ברמת דפדפן ולא מכונה‬
‫‪ ‬יכולת לעבוד ב ‪)mobile application( offline‬‬
‫21‬

13. Web Storage HTML 5
LocalStorage
13

14. Web Storage HTML 5
sessionStorage
<script>
function SetValue()
{
window.sessionStorage['value'] = document.getElementById("koko").value;
}
function GetValue()
{
var temp=document.getElementById("koko");
temp.value=window.sessionStorage['value'];
}
</script>
<input type="text" id="koko" />
<input type="button" value="Set Value" onclick="SetValue();"/>
<input type="button" value="Get Value" onclick="GetValue();"/>
WebSqlDB
http://html5doctor.com/introducing-web-sql-databases/
14

15. Geolocation HTML 5
.‫ איתור מיקום של משתמש‬
:‫ איתור על פי‬
IP
Cell-ID(cell towers)
WiFI Access Point
GPS
motion sensors
‫) סטנדרטי לכלל הדפדפנים לקבלת נ.צ‬js( API ‫קביעת‬
‫נדרש אישור משתמש להפעלת הפונקציונאלית‬
function initGeolocation()
{
if( navigator.geolocation )
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
alert("Sorry, your browser does not support geolocation services.");
}
} 15

16. Geolocation HTML 5
function success(position)
{
// GeoPosition Object
alert("Your coordinates are " + position.latitude + ", " + position.longitude);
}
function fail()
{
alert('fail to get your coordinates')
}
</script>
‫בהתקנים ניידים, המשתמש יכול גם לזוז ולשנות את מיקומו תוך כדי השימוש באפליקציה.על‬
API ‫מנת לקבל בכל שינוי מיקום את נ.צ של המשתמש ניתן להשתמש ב‬
navigator.geolocation.watchPosition(success)
16

17. Geolocation HTML 5
: ‫דוגמאות‬
 Demo 1
 Demo 2
17

18. Web Workers HTML 5
.‫ אחד‬thread ‫ על גבי דפדפנים מתבצעת תמיד ב‬javascript ‫ עד כה הרצת‬
‫ מספר‬client ‫)בצד ה‬java script( ‫ להריץ‬Web ‫- מאפשר לאפליקציות‬Web workers
‫ ברקע ולאפשר למשתמש להמשיך לעבוד במקביל, מה שמשפר משמעותית‬threads
.‫את חוויית הגלישה‬
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop(){
for (var i = 0; i <= 10000000000; i += 1){
var j = i;
}
alert("Completed " + j + "iterations" );
}
function sayHello(){
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type="button" onclick="bigLoop();" value="Big Loop" /> Demo
<input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>
18

19. Web Workers HTML 5
<!DOCTYPE HTML>
<html> bigLoop.js
<head>
<title>Big for loop</title> for (var i = 0; i <= 10000000; i += 1){
<script> var j = i;
var worker = new Worker('bigLoop.js'); }
worker.onmessage = function (event) { postMessage(j);
alert("Completed " + event.data + "iterations" );
};
function sayHello(){
alert("Hello....." );
}
</script>
</head>
<body>
<input type="button" onclick="sayHello();" value="Say Hello"/>
</body>
</html>
Demo
19

20. Web Form HTML 5
 E-mail: <input type="email" name="user_email“ placeholder="Enter a valid email address“ required />
 Homepage: <input type="url" name="user_url" /> Demo
 <input type=“text” name=“txt1” pattern=“[0-9] [a-z]”/>
 Select Number : <input type="number" min="0" max="10" step "1" value="5" name="newinput" />
Demo
20

21. Web Form HTML 5
 <input type="range" name="points" min="1" max="10" /> Demo
 Date: <input type="date" name="user_date" /> Demo
 <label for="country_name">Country : </label><input
id="country_name" name="country_name" type="text" list="country"
/>
<datalist id="country">
<option value="Afghanistan">
<option value="Albania"> Demo
<option value="Algeria">
<option value="Andorra">
<option value="Angola">
</datalist>
21

22. Scalable Vector Graphics(SVG) HTML 5
: ‫הגדרה‬
‫) היא שפת תיוג המשמשת ליצירת גרפיקה וקטורית. היא כוללת‬Scalable Vector Graphics(
‫ וניתנת‬DOM ‫רכיבים כגון צורות גיאומטריות, טקסט, אנימציה, קול, ווידאו, והיא בעלת‬
‫ ניתנת‬SVG ‫לשליטה בעזרת סקריפט. בניגוד לתמונות מבוססות פיקסלים, גרפיקת‬
‫ מתאימה לשימושים רבים - החל‬SVG .‫להגדלה והקטנה ללא ירידה באיכות התמונה‬
,‫ ועד לויזואליזציה של נתונים, טבלאות אינטראקטיביות‬HTML ‫מהוספת גרפיקה פשוטה לדפי‬
.‫משחקים ותמונות באיכות גבוהה‬
)http://www.w3.org/TR/SVG/struct.html( XML ‫ מיוצג על ידי מבנה‬HTML5 ‫ ב‬SVG
<svg version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<rect fill="orange" stroke="black" width="150" height="75" x="50" y="25" />
</svg>
<svg width="100%" height="100%">
<rect x="260" y="230" width="100" height="100"
style="fill:rgb(255,0,0);stroke-width:5; stroke:rgb(0,255,0)"/>
<circle cx="200" cy="300" r="50" stroke="blue"
stroke-width="2" fill="yellow"/>
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
22

23. Scalable Vector Graphics(SVG) HTML 5
Path :
<?xml version="1.0" standalone="no"?> M = moveto
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" L = lineto
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> H = horizontal lineto
<svg width="100%" height="100%" version="1.1" V = vertical lineto
xmlns="http://www.w3.org/2000/svg"> C = curveto
<path d="M153 334 S = smooth curveto
C153 334 151 334 151 334 Q = quadratic Belzier curve
C151 339 153 344 156 344 T = smooth quadratic Belzier curveto
C164 344 171 339 171 334 A = elliptical Arc
C171 322 164 314 156 314 Z = closepath
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
23

24. Scalable Vector Graphics(SVG) HTML 5
Filter :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
24

25. ‫)‪Scalable Vector Graphics(SVG‬‬ ‫5 ‪HTML‬‬
‫‪ ‬יכולת של 5 ‪ HTML‬לתיאור גרפיקה וקטורית דו מימדית.‬
‫‪‬הפתרונות ללא ‪ SilverLight, Flash – HTML‬ובעבר הרחוק ‪.VML‬‬
‫‪ ‬התממשקות מלאה ל-‪ JavaScript‬ו-‪.DOM‬‬
‫‪ ‬יכולת ליצור תמונה אחת לצרכנים שונים, לדומא ‪ Iphone‬ו-‪ IE‬ללא פגיעה באיכות.‬
‫‪ ‬כלים לעבודה עם ‪http://www.openclipart.org/wiki/SVG_Tools SVG‬‬
‫דוגמאות :‬
‫‪Demo‬‬
‫52‬

26. ‫‪Canvas API‬‬ ‫5 ‪HTML‬‬
‫‪ ‬יצירת צורות בדו-מימד(בעתיד תלת מימד), צבעים, אפקטים ואנימציות.‬
‫‪ Tag ‬שאפשר לבנות/לעצב בעזרת ‪.Script‬‬
‫‪ ‬מבוסס פיקסלים ולא וקטורים.‬
‫‪ ‬משמש למדיה ואנימציה ברמה גבוהה.‬
‫‪ ‬דוגמא למשחק אנימציה ‪2D‬‬
‫62‬

27. Canvas svg ‫דוגמאות של‬ HTML 5
Demo Demo
27

28. Video HTML 5
.‫ חלק מהשפה‬video ‫ ו‬audio ‫קביעת סטנדרט לנגני‬
.‫גמיש מבחינת הוספת רכיבי שליטה על הסרטון‬
.Flash ‫ שונות כגון‬Video Stream ‫ אלטרנטיבה לאפליקציות‬
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm“ type="video/webm" />
Your browser does not support the video tag. Demo
</video>
28

29. Audio HTML 5
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
29

30. ‫מבניות‬ ‫5 ‪HTML‬‬
‫‪- header‬ראש, יכול להכיל‬ ‫‪‬‬
‫כותרות, ניווט‬
‫‪-footer‬מידע על התוכן, זכויות‬ ‫‪‬‬
‫יוצרים‬
‫‪-nav‬סדרת קישורים המיועדת‬ ‫‪‬‬
‫לניווט‬
‫‪- aside‬מידע משלים לתוכן,‬ ‫‪‬‬
‫פס צדדי‬
‫‪- article‬גוף התוכן, כתבה‬ ‫‪‬‬
‫‪-section‬יחידות נפרדות בדף‬ ‫‪‬‬
‫‪Demo‬‬
‫03‬

31. ‫5 ‪HTML‬‬
‫‪ Drag and Drop‬‬
‫שימוש ב ‪ API‬יחודי לנושא ה ‪drag & drop‬‬ ‫‪‬‬
‫אין צורך בשימוש קוד מורכב לנושא‬ ‫‪‬‬
‫‪Demo‬‬ ‫‪‬‬
‫1‪Demo‬‬ ‫‪‬‬
‫‪ WebSockets‬‬
‫תקשורת דו כיוונית בין שרת ללקוח דרך ‪ Socket‬אחד של ‪TCP‬‬ ‫‪‬‬
‫תקשורת מהירה ואמינה בקלות וביעילות.‬ ‫‪‬‬
‫יכולות של העברת ‪streaming‬‬ ‫‪‬‬
‫‪Demo‬‬ ‫‪‬‬
‫13‬

32. ‫התמודדות מול ‪Flash‬‬ ‫5 ‪ HTML‬הווה ועתיד‬
‫‪ ‬חברת אפל הצהירה כי מכשיר ה-‪ Iphone‬לא יתמוך ב-‪.Flash‬‬
‫‪ Google ‬הקימה גרסה של אתר ‪ youtube‬מבוסס ‪ HTML‬ולא ‪.Flash‬‬
‫‪ Google‬השיקה שירות להמרה קבצי ‪ flash‬ל 5‪http://swiffy.googlelabs.com/ – HTML‬‬
‫‪ HTML5‬מסוגל להתמודד עם ניגון קבצי וידאו אשר נמצאים בשרת אך לא מסוגל עדיין‬
‫להתמודד עם שידורי ‪ bitstream‬דינאמי וניהול זכויות יוצרים.‬
‫‪ ‬שתי הטכנולוגיות מסוגלות להתמודד עם גרפיקה וקטורית.‬
‫‪ ‬כיום נראה שתוצאות האלגוריתם של ‪ Flash‬נראות טוב יותר חזותית מ-5 ‪.HTML‬‬
‫‪ ‬כיום קבצי ‪ SWF‬של ‪" Flash‬כבדים" יחסית לקוד ‪.HTML‬‬
‫‪ HTML 5 ‬הפתוח מייצג את ההפך הגמור מהעמדה של ‪.adobe‬‬
‫23‬

33. ‫מה נתמך ואיפה‬ HTML 5
http://findmebyip.com/litmus/#html5-web-applications
33

34. ‫5 ‪HTML‬‬
‫• האם כלל הדפדפנים יתמכו בתקן ב 4102 ?‬
‫• האם יצרני הדפדפנים יחרגו מהתקן ?‬
‫• מה יהיה עתיד טכנולוגית ‪ flash‬ו ‪? silverlight‬‬
‫• התקן יהיה רלוונטי רק לגרסאות דפדפנים מתקדמים‬
‫מה אם תמיכה לגרסאות ישנות ?‬
‫• ביצועים ?‬
‫43‬

35. HTML 5
... ‫לסיום‬
http://www.thewildernessdowntown.com/
35

36. ‫5 ‪HTML‬‬
‫תודה על ההקשבה !‬
‫63‬