Html5

Oren Assayag- CTO matrix global

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

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

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

WEB-‫התפתחות הטכנולוגיה בעולם ה‬ HTML 51991 – HTML1994 – HTML 21996 – CSS11996 – JavaScript + Https1997 – HTML 41998 – CSS22000 – XHTML 12002 – Tableless Web Design2005 – AJAX (XmlHttpRequest)… JavaScript Toolkits… Ajax ToolKit… JQuery2004-2011 – HTML 5 ,CSS3

? ‫הכרזה לתקינה מתי‬ 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

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

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

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

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

‫על 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‬

‫‪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‬

Web Storage HTML 5LocalStorage 13

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();"/>WebSqlDBhttp://html5doctor.com/introducing-web-sql-databases/ 14

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

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

Geolocation HTML 5 : ‫דוגמאות‬  Demo 1  Demo 217

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

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>Demo19

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

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

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

Scalable Vector Graphics(SVG) HTML 5Path :<?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 linetoxmlns="http://www.w3.org/2000/svg"> C = curveto<path d="M153 334 S = smooth curvetoC153 334 151 334 151 334 Q = quadratic Belzier curveC151 339 153 344 156 344 T = smooth quadratic Belzier curvetoC164 344 171 339 171 334 A = elliptical ArcC171 322 164 314 156 314 Z = closepathC142 314 131 322 131 334C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274"style="fill:white;stroke:red;stroke-width:2"/></svg> 23

Scalable Vector Graphics(SVG) HTML 5Filter :<?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

‫)‪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‬

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

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

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

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

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

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

‫התמודדות מול ‪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‬

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

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

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

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

Html5

by ek121268 on Dec 09, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Html5 — Presentation Transcript