מבנה אתר אינטרנט - Grid Layout - חלק 1

תמלול ההרצאה: מבנה אתר אינטרנט - Grid Layout - חלק 1

הטקסט המלא של הדקות הראשונות בהרצאה «מבנה אתר אינטרנט - Grid Layout - חלק 1» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   אנחנו מגיעים לדוגמה מספר 3 של גריד והיא מאוד מאוד נפוצה ונמצאת אני חושב בכל אתר וזה פשוט לייאוט. מה זה לייאוט?

2. 00:15

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

3. 00:29

   לדוגמה בכל הדפים שאני רוצה כותרת למעלה. ובכל הדפים שלי אני רוצה לוגו בצד ימין למעלה, ובכל הדפים אני רוצה זכויות יוצרים למטה, או תפריט בצד וכו' וכו'.

4. 00:42

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

5. 00:59

   לכולם אני רוצה פה זכויות יוצרים פה למעלה. זה נקרא פוטר, פוטר זה האזור התחתון. אני רוצה שני אזורים פה שקראתי להם פה Left Aside ו-Right Aside, אולי כאן אני רוצה תפריט ופה אני רוצה איזושהי פרסומת או מבצע או משהו באתר, אבל בכל דף התוכן המרכזי נמצא כאן.

6. 01:24

   אז אני יכול בתפריט לבחור דפים שונים, והתכנים מתחלפים רק כאן. כל אלה נשארים אותו הדבר. הלייאוט הזה שחוזר על עצמו בלא משנה כמה דפים יש לי 10 20 דפים באתר הוא חוזר בכל הדפים זה משהו שאני רוצה אצל כולם וגריד עושה את זה בצורה ממש

7. 01:46

   פשוטה אז בואו נעשה כזה דבר בואו נשים את זה בצד וקודם כל נאפיין את ה html אז מה אנחנו רוצים לעשות ואני מזכיר גריד מאפשר בעזרת מספר מצומצם של תגיות html מספר מצומצם של פקודות CSS לבנות לעצמנו מה שאנחנו רוצים מבחינת דו מימד.

8. 02:10

   בשביל לבנות את ה-Layout הזה המינימום שאנחנו צריכים זה כמו תמיד קונטיינר אני אקח סקשן אפשר D ואפשר כל דבר שהוא בעצם אמור לתפוס לי חלק מהדף ואני אתן לו קלאס קונטיינר למעשה הוא תופס לי את כל הדף ואנחנו רוצים את החלקים השונים שיש פה זהו אנחנו לא רוצים להתעסק

9. 02:33

   עם טבלאות ושורות ועמודות רק מה החלקים שיש. יש לנו 1, 2, 3, 4, 5 חלקים ב-Layout הזה. כל Layout יכול להיות לו חלקים אחרים, בזה יש 5 חלקים. ב-HTML 5 יש תגיות שהתפקיד שלהן זה להוות את ה-Layout של האתר.

10. 02:55

    לדוגמה, יש לנו תגית של header. פעם היינו בדיבים לפני html5 היינו שמים דיב ואז היינו נותנים לו class header.

11. 03:08

    יש לזה חיסרון מאוד גדול קודם כל כל התגיות היו דיב דיב דיב דיב דיב אז קצת יותר קשה למתכנתים לקרוא את זה. המשמעות של הדיב הזאת היא אחרת מהדיב הזאת הדיב העליונה היא עבור הכותרת הראשית של האתר הדיב התחתונה זה עבור פוטר זכויות יוצרים לינקים של כל מיני דברים באתר.

12. 03:28

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

13. 03:38

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

14. 04:07

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

15. 04:25

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

16. 04:39

    אני טיפה חורג כאן מ-HTML ועובר לתחום שנקרא SEO, Search Engine Optimization, אבל זה מאוד חשוב כי זה קשור לגמרי למה שאנחנו עושים עכשיו.

17. 04:50

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

18. 05:05

    זאת אומרת יש לנו חוקיות מה צריך להיות לך באתר אם אתה בונה layout אנחנו רוצים שהאזור של הכותרת יהיה תגית מיוחדת עבור האזור של הכותרת שנקראת header זאת תגית שלא אני המצאתי זאת תגית של html 5 ופה אנחנו רוצים את ההדר אני רק אכתוב כאן הדר כמו שכתוב פה, אבל כאן אנחנו שמים את הכותרת הראשית של

19. 05:29

    האתר, לדוגמה איזה h1 של שוז ובסייט שלנו או לא משנה מה. כמובן שיש המון חוקים לגבי מנועי חיפוש, לדוגמה שחובה שבכל דף יהיה רק h1 פעם אחת ולא פעמיים וכל חריגה מהחוקים האלה זה פנלטי, אבל אנחנו לא ממש מתעסקים כרגע ב-SEO אלא ב-Layout

20. 05:53

    על ידי גריד. הנה התגית הראשונה. התגית השנייה זאת זאת, רגע מה גם זאת הדר? זאת ממש לא הדר, אסור לנו עוד הדר אחת, אחרת אנחנו נחטוף פנלטי.

21. 06:06

    זאת נמצאת בצידי הדף ויש תגית מיוחדת שנקראת ה-side, גם שייכת ל-HTML 5. כאן אנחנו ב-left ה-side. התגית הבאה בתור זה המידע הראשי שאנחנו רוצים להציג בדף שלנו.

22. 06:23

    ב-HTML 5 קיימת תגית כזאת והיא נקראת