מתחיל לבנות אתר, האם יש בעייה להשתמש בטבלאות ?

מנסה לבנות אתר · 8/4/17

מתחיל לבנות אתר, האם יש בעייה להשתמש בטבלאות ?

שלום, אני מעוניין לבנות אתר שיהיה מבוסס על CSS כמובן (זה מה שהולך היום, נכון?) בעבר כשלמדתי HTML הדגישו לי שוב ושוב עד כמה חשוב להשתמש בטבלאות שישמשו שלד שיחזיק את חלקי הדף השונים במקומם ויגרמו לדף להיראות טוב גם כאשר משנים את גודל הדף למשל.

אך כאשר אני בודק את קוד המקור (Source) של אתרי אינטרנט שונים שאני גולש אליהם אני לא רואה שום זכר למילה Table. מדוע? האם כבר לא משתמשים בטבלאות כאשר בונים דף של אתר אינטרנט? לי דווקא היה מאוד נוח ואינטואיטיבי להשתמש בטבלאות, האם יש איזשהו מנגנון אחר שהחליף את עניין הטבלאות? איך למשל אני יוצר דף שמכיל 6 חלקים שונים (של טקסט למשל) המסודרים ב 2 טורים ו 3 שורות, ללא שימוש בטבלאות?

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

אשמח לתשובתכם על השאלות, תודה מראש.

עוץליגוץלי · 9/4/17

בטבלאות משתמשים כאשר האתר צריך להראות כמו טבלא.

נניח - עבור לוח הכפל, טבלאת ציונים וכו'.
כדי ליצור מספר בלוקים - משתמשים באלמנטים בלוקיים כתלות בסוג התוכן ומשמעות הבלוק (כדוגמה - אם מדובר בכתבה עיתונאית, השתמש בp (משמעותו פסקה). ). אתה יכול למקם את האלמנטים בעזרת CSS כרצונך, ולהעזר בהגדרות שונות עבור רזולוציות שונות. קבל דוגמת קוד מצורף, נסה לשנות רזולוציה (להקטין מסך) כדי לדמות מצב בו האלמנטים מוצגים על צג קטן של טלפון.

קוד:

<!DOCTYPE html>
<html>  
	<head>
		<meta charset='utf-8'>
		<title>my first html</title>
		<style type="text/css">
			div.partOf { display:inline-block; max-width:45%; border:1px solid red; min-width:318px;}
			body { text-align:center; }
		</style>
     </head>
     <body>
		 <div class='partOf'> TEXT block 1 with a lot of text.  might be more then one line etc...</div>
		 <div class='partOf'> TEXT block 2 with a lot of text.  might be more then one line etc...</div>
		 <div class='partOf'> TEXT block 3 with a lot of text.  might be more then one line etc...</div>
		 <div class='partOf'> TEXT block 4 with a lot of text.  might be more then one line etc...</div>
		 <div class='partOf'> TEXT block 5 with a lot of text.  might be more then one line etc...</div>
		 <div class='partOf'> TEXT block 6 with a lot of text.  might be more then one line etc...</div>
     </body>
</html>

מנסה לבנות אתר · 9/4/17

הבנתי תודה, ובמה השיטה שלך שונה מ 'media query' ?

חיפשתי היום קצת מידע על הנושא בגוגל ודיברו שם הרבה על שיטה בשם 'media query' שמאוד מזכירה את השיטה שבדוגמא שלך, מה ההבדל בין שתי הטכניקות ואיזו מהן עדיפה?

לגבי מבנה הדף והתאמה לסמרטפונים, הייתי רוצה שהדף יראה כך:

כותרת, מתחתיה תוכן ולצידו (בצד ימין) תפריט. כאשר גוללים את הדף הכל נגלל יחד כמיקשה אחת (הכותרת, התוכן והתפריט).

כאשר מקטינים את הדף או נכנסים אליו דרך סמרטפון, אני רוצה שהדף יראה כך (עדיין לא החלטתי אם אפשרות 1 או 2)

אופציה 1:
כותרת
תפריט
תוכן

או, אופציה 2:
כותרת
תוכן
תפריט

איך אני קובע אם בזמן הקטנת הדף התפריט יופיע מעל התוכן, או מתחת לתוכן? כלומר אילו אלמנטים ב HTML או ב CSS מאפשרים לי לקבוע את אופן הקיפול של האלמנטים בדף ומי יופיע מתחת למי?

אשמח לתשובה, תודה שוב.

עוץליגוץלי · 9/4/17

media query מאפשר לספק CSS שונה עבור כל טווח רזולוציות

היא עדיפה מבחינת התוצאה, אבל דורשת יותר השקעה בכתיבה. הטכניקה בה השתמשתי מכונה "זרימה" או "נוזלית", היא שומרת על ה"זרימה" הטבעית של הטקסט, ורק "קצת" מארגנת אותו. התוצאה פחות "אחידה" (אם אתה עובד עם מעצב קפדן, הטכניקה הזו לא תתאים), אבל מתאימה לעצלנים.
&nbsp
באשר לשאלתך, הייתי ממקם את הכותרת בCSS בתור block, לתפריט מגדיר inline-block עם רוחב מזערי בפיקסלים, שיגרום לתוכן "להחליק" מתחתיו, ואת התוכן באופן דומה.
&nbsp
לחליפין - הייתי מגדיר media query כך שמתחת לרזולוציה מסויימת, התפריט משנה לחלוטין את העיצוב (כולל גם הסעיפים שבתוכו).
&nbsp

מנסה לבנות אתר · 10/4/17

אז נראה לי שאני מעדיף לפי שיטת ה media query

עוץליגוץלי · 9/4/17

דוגמה עם media query

בסיס למשחקים. שנה את גודל התצוגה ותראה מה קורה לאוביקטים השונים (מגודל הקטן מ-320 פיקסלים ועד 1024 ).

קוד:

<!doctype html>
<html>
    <head>
        <title>css</title>
        <style type='text/css'>
            body { direction:rtl;  vertical-align: text-top;}
            header {  border:1px solid black; }
            @media screen and (min-width: 820px)  {
                nav { border:1px solid black; display:inline-block;vertical-align: text-top; width:10%;}
                content { border: 1px solid black; display:inline-block;vertical-align: text-top; width:89%;}
            }
            @media screen and (max-width: 820px) and (min-width:400px)  {
                nav { border:1px solid red; display:inline-block;vertical-align: text-top; width:20%;}
                content { border: 1px solid black; display:inline-block;vertical-align: text-top; width:76%;}
            }
            @media screen and (max-width: 400px)  {
                nav { border:1px solid green; display:inline-block;vertical-align: text-top; width:100%;}
                content { border: 1px solid black; display:inline-block;vertical-align: text-top; width:100%;}
            }
            
        </style>
    </head>
    <body>
        <header>hello world</header>
        <nav>
            <a href='#01'>section #1</a>
            <a href='#02'>section #2</a>
            <a href='#03'>section #3</a>
            <a href='#04'>section #4</a>
        </nav>
        <content> 
            <a name="#1"></a>
            A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot 
            of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content 
            text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A 
            lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text 
            A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot 
            of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content 
            text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A 
            lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text A lot of content text 
        </content>
    </body>
</html>

מנסה לבנות אתר · 10/4/17

שמרתי את הדוגמא כקובץ CSS והרצתי, נראה ממש בכיוון

תודה רבה, בטוח שיהיו לי עוד שאלות בהמשך.

מנסה לבנות אתר · 10/4/17

שתי שאלות נוספות, כאשר משתמשים בשיטת ה media query

1. כיצד הדף מגיב כאשר הוא מוצג דרך סמרטפון, והמשתמש מבצע זום ע"י תפיסת שתי נקודות על המסך והרחקתן? האם גם אז הטקסט ישאר ב 100% של המסך או שהוא יחרוג מחוץ לגבולות המסך?

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

FreeSoft · 10/4/17

כן ולא

1. עם הטקסט כן אבל עם תמונות לא תמיד. מומלץ להשתמש בגדלים שונים לכל תמונה על מנת להגיע לתוצאות משביעות רצון. מציע לך לגלוש עם פיירפוקס, במידה ואינך עושה את זה, ולהיעזר בצירוף המקשים ctrl+shift +M
2. אני חושב שאתה מתכוון לאתר שנבנה בנפרד לסלולר ובמקרה כזה לא מדובר באתר רספונסיבי

מנסה לבנות אתר · 11/4/17

תודה על התשובות

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

2. אם כך מה הטכניקה שכן משתמשים בה לבניית אתר מותאם לסמרטפון? האם זה לא מבוסס על CSS?

FreeSoft · 11/4/17

CSS

בסך הכל "אחראית" על העיצוב. לא כותבים אתר שמבוסס עליה. אתר מודרני מבוסס על צד שרת עם שפות כמו php, node.js ועוד וצד לקוח שיכול להכיל js ואחרים.
אליהם מצטרפות שפת סימנים בשם html ו css אלא אם אתה משתמש ב less ואז אפשר יותר בקלות לכנות אותה שפה.

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

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

למרות שלא רודפים אחריי הסלולר שלי לא מורשה לצאת לרשת ככה שאין לי אפשרות לחפש בשבילך אתרים שכן מגבילים את הזום

מנסה לבנות אתר · 12/4/17

הבנתי תודה

FreeSoft · 14/4/17

אם תתעקש על ביטול ה zoom

קוד:

/* disable zooming on mobile devices */
function mobile_viewport_meta_tag() {
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
}
add_action ('wp_head', 'mobile_viewport_meta_tag');

זה לוורדפרס אבל מהרעיון הזה תוכל להוציא קוד לכל דבר

מנסה לבנות אתר · 14/4/17

אוקיי תודה

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

מתחיל לבנות אתר, האם יש בעייה להשתמש בטבלאות ?

מנסה לבנות אתר

New member

עוץליגוץלי

New member

מנסה לבנות אתר

New member

עוץליגוץלי

New member

מנסה לבנות אתר

New member

עוץליגוץלי

New member

מנסה לבנות אתר

New member

מנסה לבנות אתר

New member

FreeSoft

New member

מנסה לבנות אתר

New member

FreeSoft

New member

מנסה לבנות אתר

New member

FreeSoft

New member

מנסה לבנות אתר

New member