יסודות תכנות צד לקוח (html ו-javascript) - שובו פתח תקווה - במיוחד למורי שובו

מדינת ישראל משרד החינוך המינהל למדע ולטכנולוגיה אגף להשתלמויות ולהדרכת עו"ה

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

יסודות תכנות צד לקוח (html ו-javascript) -  פתח תקווה

בהיקף של 30 שעות, עם  ציון, 1349017

נושאי לימוד עיקריים	Ÿ        יסודות html5, שילוב בסיסי של css Ÿ        שפת התכנות javascript, אירוע לחיצה על כפתור onclick Ÿ        שילוב גרפיקה באתרי אינטרנט Ÿ        אנימציה על CANVAS  באמצעות JAVASCRIPT
המרצה	גב' רחל פרלמן, ד"ר דורון זוהר
אוכלוסיית יעד	מורים במגמת תכנות מוכר לגמול השתלמות לעו"ה בלבד
מועדים	ההשתלמות תתקיים במתכונת של  4 מפגשים פיזיים בין השעות 16:45-20:15 בתאריכים: 5.1.14, 12.1.14, 19.1.14, 26.1.14 6 מפגשים וירטואליים לעבודה עצמית: בין השעות 17:00-19:30 בתאריכים: 7.1.14, 9.1.14, 14.1.14, 16.1.14, 21.1.14, 28.1.14
מקום ההשתלמות	ישיבה חרדית שובו, פתח תקווה ההשתלמות מתקיימת במוסד חרדי, נבקש לכבד ולהתלבש בהתאם
דמי השתתפות	120 ש"ח

הרשמה

הרשמה באמצעות טופס ההרשמה המצ"ב לפקס' מס' 03-6301366. או לכתובת דוא"ל slavab@mapa.ort.org.il

ü       פתיחת ההשתלמות מותנית במספר הנרשמים

ü       היחידה שומרת לעצמה את הזכות לבצע שינויים, במידה ויהיו כאלה נודיעך בעוד מועד

* נשלחה בקשה לאישור תוכנית במשרד החינוך

    ב ב ר כ ה

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

מדינת ישראל משרד החינוך המינהל למדע ולטכנולוגיה אגף להשתלמויות ולהדרכת עו"ה

ט ו פ ס   ה ר ש מ ה

לכבוד

אורט אפיקים - היחידה להשתלמויות מורים

אורט ישראל

דרך הטייסים 28, תל-אביב 67299

פקס: 6301366 – 03

ניתן לשלוח את טופס ההרשמה לדוא"ל slavab@mapa.ort.org.il

הרשמה להשתלמות בנושא:

תכנות צד לקוח פתח תקווה

בהיקף של 30 שעות עם  ציון 1349017

שם משפחה                                שם פרטי                             ת.ז.          /                      

שם ביה"ס (במדויק)¨                                                             חט"ב  ¨ תיכון  ¨  מכללה

מקבל משכורת מאורט      ¨ לא ¨ כן       מספר העובד באורט הוא __________________ 

מורה במסגרת אופק חדש ¨ לא ¨ כן                              מורה במסגרת עוז לתמורה  ¨ לא ¨ כן       

תפקיד בביה"ס                                          מקצוע ההוראה                                               

טל' בבית                                      כתובת פרטית                                                            

נייד                                       דוא"ל                                                                               

דמי ההשתתפות בהשתלמות -. 120 ₪.

מקומך בהשתלמות מובטח רק לאחר הסדרת דמי ההשתתפות.

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

סמן/י ב- X במשבצת המתאימה:

¨ מצ"ב המחאה ע"ס -.120 ש"ח לפקודת אורט ישראל.

¨ למקבל/ת  משכורת מאורט ושאיננו מורה בשבתון.

הריני מאשר/ת לכם לחייב את משכורתי באורט בסכום של -.120 ₪ מס' העובד באורט                  .

דמי ההשתתפות יוחזרו רק אם ההשתלמות תבוטל על-ידי יחידת ההשתלמויות.

למורים בשבתון בלבד:

¨ אני מורה בשבתון בשנה"ל תשע"ג (1.9.12 - 31.8.2013) וההשתלמות הזאת אושרה לי ע"י קרן ההשתלמות והיא ע"ח קרן ההשתלמות של ארגון המורים/הסתדרות המורים (מחק את המיותר).

ידוע לי שעלי לחתום במשרד יחידת ההשתלמויות על הרשאה לחיוב חשבוני בקרן ההשתלמות

(מספר מוסד 0270)

תאריך                                       חתימה                                 

לשימת ליבך הכניסה לקמפוס תתאפשר רק למשתלמים שהסדירו הרשמה

ובהצגת תעודת זהות בכניסה לשומר בשער

* נשלחה בקשה לאישור תוכנית במשרד החינוך

השתלמויות בסיייבר ת,תכנות צד לקוח,מורים מובילים חט"ב

כבוד 
אבי חדד,


להלן ההודעה:

שלום רב,

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

1. יסודות תכנות צד לקוח (html ו-javascript) -  פתח תקווה, 30 שעות
2. מבואות לתכנית הלימודים החדשה בסייבר ואינטרנט,  באר שבע, 30 שעות. עדכנו והוספנו תכנים ההשתלמות כך שמורים שהשתלמו בעבר בנושא זה יוכלו להשתלם בשנית. ההשתלמות מתחילה ביום שני הקרוב!
3. יסודות תכנות צד לקוח (יסודות html5 ו-javascript), באר שבע, 30 שעות
4. תכנות צד לקוח מתקדמים, (השתלמות המשך להשתלמות יסודות תכנות צד לקוח), באר שבע, 30 שעות.

ארבעת השתלמויות אלו מנוהלות אורט אפיקים. פרטים נוספים בלשונית השתלמויות שבאתר המקצוע. לשאלות/שליחת טפסי הרישום יש לפנות ישירות לסלבה בדוא"ל : slavab@mapa.ort.org.ildir="LTR">slavab@mapa.ort.org.il dir="RTL">

5. השתלמות מורים מובילים לחט"ב, רמת גן, 60 שעות.

עד כה אשרו את השתתפותם:

·         מטה הסייבר הצה"לי

·         ניצב משנה (בדימוס) אבי דוידוביץ, הרצאה בנושא `זיהוי אמת ושקר`

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

·         ד"ר טל פבל, הרצאה בנושא `הרשת האפלה וה-bitcoin`

·         גב` אתי טל, סדנה בנושא `שוויון הזדמנויות מגדרי בהוראת מדע וטכנולוגיה בתכנית העתודה המדעית`

·         מר אבי חדד, הרצאה בנושא `חשיבה יזמית בקרב בני נוער`

·         מר ניר תורגמן, `שימוש וחיפוש מידע ברשת האינטרנט`

ההרשמה להשתלמות זו תחת לשונית אירועים שבאתר (ההשתלמות מוגבלת ל-25 מורים).

כמו תמיד, במידת הצורך ניתן לפנות אלי באמצעות המייל doronzoh@gmail.comdir="LTR">doronzoh@gmail.com dir="RTL">,

כל טוב וחנוכה שמח, דורון

פרק 1 - מבוא לרשתות מחשבים

פרק 1 - מבוא לרשתות מחשבים

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

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


 מוטיבציה: מה קורה כשאני גולש לפייסבוק?
o אם אני רוצה לבנות לפייסבוק משלי, מה אני בעצם צריך?
o לעבור על פונקציות עיקריות
 אימות
 אחסון
 תצוגה ועיצוב
 אינטרקציה
 תקשורת
o הפוקוס שלנו בספר יהיה בתקשורת. ספציפית, בפרק הזה נצייר בקווים כללים
מה קורה כשאני כותב www.facebook.com בדפדפן ולוחץ Enter עד שמופיע
לי העמוד במסך.


 WWW 
o כשאנחנו אומרים ביום-יום אינטרנט, אנחנו מתכוונים ל-Word Wide Web.
מדבור באוסף עמודי האינטרנט שאנחנו גולשים אליהם בדפדפן. פירוש המילה
Web היא רשת, כמו ברשת קורי העכביש - באותו האופן שעמודי האינטרנט
מקושרים אחד לשני עם לינקים. עמודי האינטרנט יכולים להיות מפוזרים כל רחבי
העולם - Word Wide - בעוד אתר אחד בניו-יורק, השני בחיפה והשלישי בטוקיו.
o על מנת שהדפדפן יוכל להציג את העמוד הראשי של האתר
www.facebook.com, הוא צריך לדעת איך הוא נראה )מה כתוב ואיפה? באיזה
גופן? באיזה גודל? צריך לצייר תמונות על המסך? איך הן נראות? וכו'…(, מה
קורה כשאני לוחץ על אחד הכפתורים )למשל, על לינק או כפתור Login(. הדפדפן
צריך לא מעט מידע כדי להיות מסוגל לעשות זאת.
o מאיפה הדפדפן משיג את המידע? כמובן, מפייסבוק, www.facebook.com.
o איך פייסבוק יודעים לשלוח לי את המידע הזה? הדפדפן צריך הלדויע אלתר של
פייסבוק שהוא מעוניין בו. בניסוח אחר: הדפדן צריך לשלוח הודעת בקשה לאתר
האינטרנט של פייסבוק, שאומרת פחות או יותר, "שלח לי את המידע הנדרש כדי
להציג את העמוד הראשי ב-www.facebook.com". אתר האינטרנט של
פייסבוק מקבל את הבקשה, ובתורו שולח הודעת תגובה מתאימה לדפדפן,
שמכיל את המידע הדרוש, כפי שפירטנו למעלה.
o אתר האינטרנט של פייסבוק מקבל בקשה ושולח תגובה. כלומר, הור נותן שירות
לדפדפן. מכאן, אתר האינטרנט של פייסבוק מכונה שרת והדפדפן מכונה לקוח.
o באופן כללי נוכל לומר, שכאשר גולשים ב-WWW, ישנם לקוחות )דפדפנים(
ששולחים בקשות אל השרתים )אתרי האינטרנט(, והשרתים מחזירים תגובות
ללקוחות. המידע שמגיע בתגובות, משמש את הדפדפנים להציג על המסך את
אתרי האינטרנט למשתמשים.
o על מנת לראות את )חלק( המידע שהשרת שולח ללקוח, נוכל ללחוץ בדפדפן קליק
ימני במקום ריק באתר האינטרנט ולבחור ב-View Page Source. אתם תראו
הרבה טקסט שמכיל את המידע שפירטנו מקודם. כרגע לא נתעמק במה אנחנו רואים בדיוק, אבל נסו לזהות חלקים מהעמוד האינטרנט בטקסט הזה, כמו
כותרות ופסקאות.


 IP Address 
o צורך
 כדי שנוכל לשלוח ולקבל הודעות, צריך לדעת לאיפה לשלוח אותה. ממש
כשם שאני שולח מכתב בדואר, יש לי על המעטפה את כתובת היעד
)נמען( ואת כתובת המקור )מוען(. כנ"ל עבור חיוג בטלפון, ובהרבה
מקרים אחרים של תקשורת.
 באותו אופן, גם כשאני שולח מידע ברחבי האינטרנט, יש צורך בכתובת
מתאימות. הכתובות הללו מכונות כתובות IP והן ייחודיות לכל מחשב
שמחובר באינטרנט )מריחה!(.
o מבנה
 עבור כתובות דואר יש מבנה קבוע, שם מלא + רחוב + מספר בית + עיר
+ מיקוד. גם עבור מספרי טלפון יש מבנה קבוע של ספרות שמכילות
קידומות ומספר.
 כתובות IP מורכבות מארבעה בתים. כל בית יכול קבל 652 ערכים בטווח
0-652, כך שניתן להציג את כתובת ה-IP כארבעה מספרים בטווח הזה.
נהוג להפריד אותם בנקודה.
o במקרה שלנו, הודעות הבקשה שהדפדפן שולח לאתר האינטרנט של פייסבוק
מכילה בכתובת המקור את כתובת ה-IP של המחשב ממנו גולשים, וכתובת
היעד את כתובת ה-IP של האתר של פייסבוק. בכיוון ההפוך, במקרה של
הודעות התגובה שאתר האינטרנט של פייסבוק שולח לדפדפן מכילה בכתובת
המקור את כתובת ה-IP של האתר של פייסבוק, וכתובת היעד את כתובת ה-
IP של המחשב ממנו גולשים.
o אתם בוודאי אומרים לעצמכם שיש כבר כתובת לאתר פייסבוק, הלא היא
www.facebook.com. אתם מעלים נקודה חשובה, ניגע בה בהמשך.
o תוכלו לגלות את כתובת ה-IP של הסמארטפון שלכם ע"י חיפוש בגוגל של " my
ip address" וכניסה לאתר הראשון.
o כמה כתובת IP אפשריות לדעתכם? יש 652 אופציות לכל אחד מארבעת
המספרים, לכן 6^26.


 ping 
o איך אנחנו יכולים לגלות מהי כתובת ה-IP של אתר אינטרנט מסויים? למשל של
Google, ynet, facebook וכו'? לשם כך נשתמש בכלי ping. נציין שייעוד הכלי
לא למציאת כתובת IP של אתר אינטרנט, תכף נשמש בכלי מתאים יותר.
o נפתח את ה-cmd ונרשום www.facebook.com ping. יופיעו כל מני דברים על
המסך, אך תוכלו לזהות שם כתובת IP. זו כתובת ה-IP של שרת האינטרנט של
פייסבוק.
o נסו להשתמש בכלי עבור אתרים שונים.
o הייעוד האמיתי של ping הוא לבדוק האם מחשב בעל כתובת IP מסויימת מחובר
לרשת, ולמדוד כמה זמן לוקח להודעה להישלח ולחזור אלי בחזרה. ping שולחת
בקשת הד, שברגע ומחשב היעד מקבל אותה, הוא משיב מיד בתשובת הד.
תשובת ההד ובקשת ההד מכונות גם ping ו-pong בהתאמה. כך ניתן לבדוק
האם המחשב בכתובת ה-IP הזו קיים, ולקבל מדד למהירות הקשר אל המחשב
הנבדק.
ping o שולח מספר הודעות הד, ואפשר לקבל מידע גם על מהירות הקשר )זמן
מינימלי, מקסימלי וממוצע במילישניות( וגם על איכות הקשר )מספר/אחוז
ההודעות ההד שקיבלנו עליהם תשובה(.  נסו להשתמש בכלי ping כלי לבדוק את משך הזמן להגעת תשובת הד לאתרים
הבאים. בידקו האם המרחק הגיאוגרפי משפיע, אם כן, כיצד?
www.yahoo.com (United States)
www.bbc.com (United Kingdom)
www.newtoholland.nl (Netherland)
www.yahoo.co.jp (Japan)
www.southafrica.co.z (South Africa)
www.webawards.com.au (Australia)

 GeoIP 
o עד עכשיו דיברנו על שרתים, לקוחות וכתובות. אבל בעצם, כשאני גולש לאתר
אינטרנט מסוים, הודעת הבקשה שלי צריכה להגיע בסופו של דבר למחשב )שרת(
שיטפל בה. השרת הזה נמצא איפשהו ברחבי הגלובוס. האם אני יכול לדעת איפה
הוא נמצא?
o ישנם מאגרי נתונים של המיקום הגיאוגרפי )ברמת העיר( של כתובות ה-IP.
בהינתן כתובת IP ניתן לדעת באיזו מדינה ועיר היא נמצאת. מאגרים אלו לא
רשמיים )אין בעצם שום מאגר רשמי, בגלל האופן שבו בנוי האינטרנט, אבל על
כך בהמשך הספר( ולכן הם לא מדויקים )חוסר הדיוק יכול להיות ברמת העיר
ולפעמים אף ברמת המדינה(.
o השתמש באתר http://www.geoiptool.com כדי לגלות את המיקום הגיאוגרפי
של אתרים שונים. נסו גם אתרים אקזוטיים וביזאריים, האם זה הגיוני?


 ענן האינטרנט
o אם יצא לכם לבדוק את המיקום הגיאוגרפי של אתר פייסבוק, גילתם שהוא נמצא
במנלו פארק בקליפורניה. איך בעצם קורה פה משהו מפתיע, איך הודעת הבקשה
מהלקוח מגיעה עד לשרת בארה"ב והודעת התגובה חוזרת בחזרה? המידע
מטייל חצי כדו"א ובחזרה!
o זה נשמע לא סביר שהמחשב שלנו מחובר ישירות לשרת אתר האינטרנט של
פייסבוק, או בעצם לכל שרת אינטרנט אחר, אם כן, איך המידע מצליח להגיע?
o האינטרנט הוא בעצם אוסף של הרבה מאוד מחשבים שמחוברים אחד לשני
בצורה דיי מורכבת )ה-WWW הם דפי האינטרנט שמקושריםם אחד לשני(.
הודעה שנשלחת ממחשב אחד למחשב שני שמחוברים לרשת האינטרנט,
מועברות ממחשב למחשב שמחוברים ישירות אחד מהשני, כל שכל ממחשב
מעביר את ההודעה למחשב אחר שהוא קרוב יותר אל היעד. לתהליך הזה, זה
העברת הודעה ממחשב אחד לשני ברשת האינטרנט דרך מחשבים באמצע,
קוראים ניתוב. יש פה אלגוריתמיקה דיי מתוחכמת של איך לגרום לאינטרנט
לעבוד, שבסופו של דבר זה להצליח להעביר הודעות ממחשב אחד למחשב שאני
שמחוברים לרשת האינטרנט. כל המחשבים בדרך משתמשים כמובן בכתובת
המקור והיעד שבהודעה כדי לדעת מאיפה מגיעה ההודעה ולאן היא צריכה להגיע.
o מכיוון שהאינטרנט היא רשת מורכבת ומבוזרת, לעיתים משתמשים במונ בעברית
ענן האינטרנט לתיאור הרשת המורכב
 traceroute o
 האם אנחנו יכולים לגלות את המסלול שעוברת ההודעה? אילו מחשבים
מעבירים אותה בדרך מהמקור אל היעד בתהליך הניתוב?
 הכלי traceroute מאפשר לי לעשות זאת בעזרת שליחת הודעות הד,
בדומה ל-ping. גם עליו נלמד יותר לעומק בהמשך.
 תוכלו להריץ אותו מה-cmd בעזרת הפקודה ip address< tracert -d<
 הכלי מדויע שהיא לא תמשיך לעקוב אחר הניתוב אם הוא ארוך
מ-00 קפיצות )hop(, העברה של חבילת מידע ממחשב אחד
לשני נקראת קפיצה, והמרחק ממחשב ליעד נמדד לרוב במספר
הקפיצות בין מחשבים.