HTML
על טים ברנרס-לי שמעתם? לא? אולי הוא בכלל לא מספיק חשוב בכדי לשמוע עליו?
תחליטו אתם. הוא בסה"כ, בין יתר הדברים שעשה, המציא את ה-HTML. הא, כן, הוא גם הגה את ה-World Wide Web אבל זה סיפור אחר.
ה-HTML זה ראשי-תיבות של HyperText Markup Language, והינה ההפתעה השנייה: יש שם בעברית: "שְׂפַת סִימָנֵי עֲרִיכָה לְתַמְלִיל-עָל". אני מצפה שמהיום תשתמשו בו!
ב- markup language הכוונה, בהקשר שלנו, לשפת תגיות, הנלוות לטקסט ומטרתן היא בעיקר להוראות של הצגת הטקסט, קביעת היררכיה, מידור של חלקים ועוד. הדבר קיים כבר מזמן, למשל הוראות הבמאי על תסריט וכד'.
אגב, זו שפת תגיות ולא, זו לא שפת תכנות. חשוב לי לציין את זה כי ראיתי בקו"ח משפטים כמו:
"שפות תכנות: HTML, XML ." נא בדקו בקו"ח שלכם ואם קיימים, מחקו מיד, זה יחסוך לכם עוגמת נפש.
תג HTML אופייני נראה כך:
<title>HTML – ויקיפדיה</title>
התג <title> (או כל תג אחר) אינו נראה בדף, והוא מורה על כך שהטקסט המקושר אליו הינו הכותרת: HTML – ויקיפדיה.
התג <title/> בעצם אומר בזכות הסלש שזוהי סופה של הכותרת.
ב"הייפר טקסטס" הכוונה לקישור לנקודה אחרת, וידוע בימינו בכינוי החיבה "לינק".
בכדי לראות עוד דוגמאות פשוט תבחרו view source כשאתם רואים עמוד מסוים בדפדפן.
ה-HTML מאפשר הכנסת תמונות ואובייקטים אחרים כמו Java Script לדף אינטרנט שאותו הדפדפן שלכם "מתרגם" למה שאתם רואים.
מה לשים לב בבדיקות?*
ישנם אתרים שבודקים תקינות של דפי HTML, למשל זה. למרות שבבסיסה השפה הזו היא סלחנית, כדאי לבדוק האם מדובר באזהרות פחות חשובות או בדברים שיש לתקנם.
ועכשיו כמה נקודות הקשורות ל-HTML ואובייקטים שהוא יכול להכיל. בחרתי במושגים שאני שומע ביום-יום. ברור שיש עולם שלם מאחורי ה-HTML והאובייקטים הללו. מה שחשוב לנו, בתור בודקים, זה להכיר אותם ברמה לפחות בסיסית ולדעת לאתר אותם בדף. חשוב להבין אילו בדיקות מותאמות לאילו אלמנטים. למשל אם יודעים שבעמוד מסוים יש iframe (הסבר למטה) צריך לקחת בחשבון שיכול להיות שלא תהיה גישה לאתר השני מכל מיני סיבות, וששינוי באתר השני עלול לפגוע ב-UI של האתר שלי.
JavaScript
ציטוט ישיר של וויקיפדיה:
"Java Script היא שפת תסריט מפורשת מבוססת אובייקטים המותאמת לשילוב באתרי אינטרנט ורצה על ידי דפדפן האינטרנט בצד הלקוח. השפה מרחיבה את יכולות שפת התגיות הבסיסית HTML ומאפשרת בכך ליצור יישומי אינטרנט מתוחכמים יותר. למעשה, רוב אתרי האינטרנט המודרניים משלבים שפה זו. היא ידועה בעיקר כשפה המוטבעת בדפי HTML על מנת להציג דפים דינמיים, שמשולבת בהם תוכנה. קוד ה-JavaScript שמשולב בדף HTML מבוצע על ידי הדפדפן. JavaScript נוחה מאוד לעבודה עם DOM ולתפעול DHTML."
מה לשים לב בבדיקות?
בדיקות UI ופונקציונליות רגילות, ע"פ הגדרות המוצר.
Cascading Style Sheets או CSS
CSS נועד להפריד אלמנטים עיצוביים מהעמוד עצמו, וכך להפוך את מקור העמוד לקריא יותר. בנוסף מספר דפי HTML יכולים לרשת מאותו וה- CSS חוסך עבודה והופך את האתר לעקבי יותר.
ב- Cascading הכוונה לכך שיש היררכיה, למשל תגית עיצוב בתוך עמוד עצמו גוברת על אותה תגיד ב-CSS.
מה לשים לב בבדיקות?
אכן האתר עקבי באובייקטים שלו (למשל סוגי וגדלי פונטים). כשמוצאים בעייה כדאי להבין האם מדובר רק בדף אחד או אם מדובר ב-CSS, שזה האחרון ישפיע על כל האתר. לכן תיקון CSS יש לבדוק בכמה דפים, לא רק שהעניין תוקן אלא שדבר לא נפגע כתוצאה.
DIV
קונטיינר שמאגד תחתיו אלמנטים של הדף ויוצר חלקים. כך ניתן למשל לאחד פונט לכל הטקסט תחת ה-DIV.
Asynchronous JavaScript And XML או AJAX
AJAX היא טכניקת פיתוח של צד ה-client שמטרתה לייצר אפליקציות ווב בלתי מסוכרנות. ב"בלתי מסוכרנות" הכוונה שהטעינה של חלקים אלה נעשית ברקע ואינה מעכבת את טעינת העמוד. בנוסף, תוכן ה-AJAX יכול להתעדכן מול השרת מבלי הצורך בטעינת הדף מחדש. כל זה מושג ב-Java Script שנמצא בדף הקליינט.
מה לשים לב בבדיקות?
שאכן התוכן של האובייקט יכול להשתנות ללא טעינת הדף, ו"יחסיו" עם הדף ואובייקטים אחרים.
Inline frame או Iframe
זהו תאג שבעזרתו אפשר להכניס מסמך אחר לתוך המסמך שעובדים עליו כרגע. בעצם אפשר להכניס ל-iframe אתר אחר.
מה לשים לב בבדיקות?
מעבר למה שנאמר למעלה, ענייני security, שהאתר שהכנסנו לא "יגנוב" מידע של משתמשים (למרות שיש לו cookies משלו).
Document Object Model או DOM
ה-DOM הוא סטנדרט לגישה למסמכים (ב"מסמך" הכוונה כאן לעמוד HTML).
בעזרת ה-HTML DOM ה-Java Script יכול להגיע ולשנות את כל האלמנטים בעמוד. כשעמודHTML נטען הדפדפן יוצר את המודל הזה של האובייקטים של המסמך, כלומר הדף. למשל:
בעזרת מודל זה ה-Java Script מקבל יכולת לצור HTML דינמי:
לשנות אלמנטים, לשנות מאפיינים של אלמנטים , לשנות את הסטייל של העמוד, להוסיף אלמנטים ותכונות ל-HTML וליצור HTML Events חדשים.
מה לשים לב בבדיקות?
בדיקות UI ופונקציונליות רגילות, ע"פ הגדרות המוצר.
* הכוונה היא ספציפית לנושא זה והבאים אחריו, לא לבדיקות כלליות של דף אינטרנט למשל UI וביצועים.
מקורות:
וויקפדיה
tizag tutorials
אין תגובות:
הוסף רשומת תגובה