שאלה שאני נתקל בה המון בפורום בו אני חבר- פורום בוני אתרים בתפוז.
אז החלטתי לכתוב מדריך בנושא ולטבל אותו בהמון קישורים ומאמרים.
אז מה זאת חשיבה CSSית? איך בונים אתר רק באמצעות CSS וללא טבלאות?
נושא זה איננו קצר והוא מורכב ביותר מכמה פסקאות, אך אנסה לפשט זאת כמה שניתן.
מה זה CSS?
זוהי שפה בה את/ה מעצב/ת את העמודים שלך. הרוח מאחורי XHTML אומרת להפריד בין עיצוב לתוכן.
אז HTML הוא האחראי על התוכן. התוכן לא מתבטא רק בטקסטים, אלה גם במבנהו.
לזאת נדרשים 2 מושגים חשובים ביותר שהם חלק בלתי נפרד משפת הHTML- היררכייה & סמנטיקה.
מבנה עמוד HTML מתאר את ההיררכייה בין האלמנטים בתוכו, הקשרים בינהם ומשמעותם. על המשמעות אחראית הסמנטיקה. (עוד על סמנטיקה ניתן לקרוא כאן, מאמר שכתבתי בעבר בבלוג)
אז אפיינו את מבנה הHTML של המסמך, הנחנו את כל התכנים בתוך האלמנטים הסמנטים הייעודיים שלהם, וכעת הגענו לשלב הבא: כיצד אנחנו הופכים את כל המידע הסמנטי הזה לעמוד מעוצב, סקסי ויפה.כדי לגרום לכל הHTML הזה הבנוי מdivים ופסקאות, כותרות (heading), רשימות (ul), רשימות הגדרה (dl) וכו’, להיות עמוד מעוצב שיושב טוב על הדף, אנחנו צריכים ללמוד כמה מודלים בCSS.המודלים שצריך ללמוד הם:
בוקס מודל (Box Model) - מודל זה מתאר את היחסים בין האלמנטים מבחינת התנהגותם במרחב. איך אנחנו יוצרים מרווחים בין פסקה ופסקה בלי לכתוב BR בינהן (וזה בקטן ביותר).
Box Model at W3C
The Box Model
Visual Formating Model- מודל זה מאגד בתוכו את כמה מהקונספטים החשובים בCSS - ציפה Float, ניקוי Clear, אלמנטים בלוקיים לעומת אינלייניים, המיקומים השונים- סטטיים, רלטיבים או אבסולוטים, the display property, הסטת אלמנטים לפי פינותיו top, right, bottom, left, והיררכיית שכבות Z-Index. כל מודל הVisual Formating בW3C.
- אלמנטים בלוקיים לעומת אינלייניים- מה ההבדל בין div לspan. או למה אי אפשר לשים פסקה, דיב או טבלה אחד לצד השני. למה תמיד הם יורדים שורה.
- מיקומים השונים- סטטיים, רלטיבים או אבסולוטים כיצד אנחנו משנים מיקומו של אלמנט בזרימה ומעניקים לו תכונה המאפשרת לו לזוז או לצוף מעל אלמנטים אחרים.
- the display property- כיצד מעלימים אלמנטים מהמסמך.
- הסטת אלמנטים לפי פינותיו top, right, bottom, left כיצד מזיזים או מרחיקים אותו בפועל.
- היררכיית השכבות (Z-Index) כיצד שולטים בסדר השכבות.
כל המודלים ומרכיביהם יגרמו לנו לבנות אתרי אינטרנט מבוססי CSS. אך בשטח צריך לדעת עוד כמה טכניקות חשובות שיגרמו לאתר שלנו להתמקצע באמת:
-
קביעת גודל הפונט באתר באמצעות EM
גודל הפונט או יחידות הbox model המוגדרים בפיסקלים הופך את האתר לקבוע בגודלו ללא יכולת להגדילו. עוד על EM ניתן למצוא כאן.
לינק נוסף (בחסות יאיר האבוד) EM vs. Pixel -
Image Replacement
כותרות תמונות אשר אתם רוצים שתהינה טקסטואליות למען נגישות מנועי חיפוש, אך שיראו את התמונה ולא את הטקסט, ניתן לבצע באמצעות שיטה זו. מאמר זה מביא את מגוון הדרכים לבצע רעיון זה. כפי ששמתם לב כבר, ישנם הרבה דרכים ליישם רעיון זה. ביחרו את המועדפת עליכם. -
תפריטים
כפי שבטח קראתם, תפריטים לא נכתבים באמצעות טבלאות. אז איך בכל זאת עושים אותם? באמצעות רשימות אשר ילדיהן צפים. עוד על כך בלינק הבא. -
Sliding Doors
שיטה מדהימה זו הינה בסיס להמון דברים בweb design. ניתן לעשות עימה כפתורים/לחצנים מעוגלים, מבנה עמוד מעוגל שלם, קוביות בעלות פינות מעוגלות. כלומר כל דבר שתחליטו לקחת אליו טכניקה זו. -
Sprites
ספרייטס היא שיטה מדהימה שרק לאחרונה החלה לרוץ ברחבי הרשת בין המעצבים. שימו לב לכותרות המאמרים באתר שלי עצמו. הכותרת הירוקה שבמעבר עכבר עליה הופכת בהירה יותר? שינוי זה עושה שימוש בטכניקה זו. הרעיון הוא לטעון את כל מצבי הrollOver יחדיו כתמונה אחת ולשנות את מיקום תמונת הרקע בעת מעבר העכבר.
עוד על כך, ניתן לקרוא כאן.
מאמר זה מבוסס בחלקו על מאמרו החשוב של Jonathan Snook, היוצר שהמלצתי על בלוגו ביום הבלוגים האחרון.
אשמח מאוד לקבל פידבקים או דגשים על חוסרים במאמר זה ואשמח להרחיבו בהתאם.Happy Learning.
שלומי.
September 2nd, 2007 at 7:00 am
אני חייב לתהות מדוע אין אף מקור בעיברית בתחום זה. כל המקורות שהפנית אליהם הם באנגלית. אני כמתכנת, שרוצה להכיר את התחום במידת מה, אבל אין לי כוח לקרוא יותר מדי, זה די מעיק עלי.
September 2nd, 2007 at 8:28 am
גורו יאיא
כמתכנת אתה אמור להיות מסוגל לאכול רפרנסים בלעז כאילו אתה אוכל מלפפון עם טיפה מלח. מעטים עד כדי לא קיימים כמעט, המקומות בשפת אמך שיתנו לך סקירה מקצועית על נושא טכני כזה או אחר. העולם הוא עולם באנגלית - והדרך לתקשר בין אנשים מרחבי הגלובוס - זו השפה.
שלומי - אחלה יוזמה
צריך להוסיף את התמונה במקום ה (לינק לצילום מסך של מבנה סמנטי)
מה שחסר לי זה אולי טיפה עניינים טכנים ועצות של בעל נסיון. איך מתכננים את התכנים ואיך יודעים איך לחלק אותם לרמות השונות, האם יש תוכנות שיכולות לעזור (חינאמיות :P) בתכנון המודלים שלנו ?
הדבר האחרון שיכול לעשות את ההבדל הוא איזה case study שיראה אולי step by step איך לוקחים תוכן והופכים אותו לרמות מידע שונות, מעמדים אותו מעצבים אותו ובונים אתר. לא משהו מורכב - מספיק דף אחד עם כמה רמות מידע כך שיבינו איך כל הסיפור הזה עובד.
September 2nd, 2007 at 9:07 am
אחלה רעיון איתן. נכנס לGunt.
September 2nd, 2007 at 9:32 am
היוזמה מצויינת ולמרות שלא חיפשתי אני בטוח שאין כמעט מאמרים (או פוסטים) שמתארים את מה שניסית לתאר כאן לקהל היעד שניסית לכוון אליו - בדרך כלל מאמרי CSS מכוונים יותר גבוה, לחבר’ה שלהם ולא למי שמתחיל.
הבעיה עם הפוסט שלך היא שהוא מציג חלק מזערי מהרעיון - אתה מדבר מסביב אבל לא מראה שום דבר בעצם ואם הייתי מישהו שמתחיל ללמוד, הייתי יותר מכאן עם אותו ידע שבאתי - שכדי לבנות אתר ב CSS, צריך לדעת CSS (כלומר בוקס מודל והויזאול פורמטים שהזכרת) - אם אני לא יודע אותם, אני לא ממש אבין מה רוצים ממני בשיטות שפרטת בצורה טובה יותר בהמשך.
אני למשל הייתי בוחר אתר ספציפי לדוגמה, כמו שאיתן הזכיר, והולך על הבסיס של הבסיס כדי לתת הנחיה:
http://www.comverse.com/company_profile
כשאני בא לבנות עמוד כזה, אני בדרך כלל מחלק אותו ל 3 חלקים ונותן להם שמות ברורים pageTop, pageMiddle ו pageBottom
ל ID שלי אני נותן שמות עם קפיטל אות גדולה, לקלאסים עם אות קטנה. כמעט תמיד משתמש ב ID אלא אם אני יודע שזה משהו ש”ידברו” איתו בדוטנט ואז ה ID שמור לשם (ואני לא אערבב ID שנוצר אוטומטית ב CSS שלי)
החלק העליון - pageTop - הוא תמיד בגובה קבוע ואני לא רוצה שישתנה בכל צורה שהיא, ולכן אני מגדיר לו תמיד גודל קבוע ו position:relative וגם overflow:hidden ואז כל מה שימוקם בתוכו עם absolute ימוקם יחסית אליו - וככה אני יכול להגדיר כל דבר במיקום אבסולוטי יחסי לקופסה הזו ושום דבר לא ימתח לי אותה (למשל תמונה שהמנהל העלה בגודל כפול ממה שצריך)
אותו עקרון הולך ל pageBottom שם אני מגביל עם hidden גם את התפריט התחתול (נוצר דינאמית בדברים שאני עושה)
החלק המרכזי כמעט תמיד מתחלק ל 3 עמודות - ואת זה אני עושה עם FLOAT לכל צד.
במידה ויש לי רקע של טורים, אני אישית לא אוהב האקים למינהם ומשתמש פשוט בפיקסל ברוחב כל העמודות וגובה פיקסל בודד שאותו אני מותח על גבי ציר ה Y ואז אני מקבל 3 עמודות בצבעים שונים.
כלי מעולה בהקשר הזה - getfirebug.com שעובד על firefox. לוחצים על inspect ועוברים על החלקים באתר וככה רואים כל מיני קופסאות ובוחנים את ה CSS שלהם שנוצר דינמית (לא רק מה שמוגדר במקור)
אני חושב שאחרי שמבינים את החלוקה הזו, אפשר להתחיל להתייחס ולעצב דברים בפנים עם CSS, כלומר הכלים הכי חשובים ב CSS שאיתם צריך להתחיל הם position (רלטיב ואבסולוט והיחס בינהם), וה FLOAT עם ה CLEAR שצריך מדי פעם.
אחרי שמבינים את הכלים האלה ונתקלים בבעיות איתם צריך ללמוד את הבוקס מודל כדי להבין מה הוא פותר בעצם ורק בסוף להתעמק בכל עיצוב התוכן עצמו ולא רק עיצוב העימוד.
יצא קצת יותר ארך ממה שתיכננתי
מקווה שעוזר..
אופיר
September 2nd, 2007 at 11:01 am
נכון. ואני עושה את זה. בנקודות שחשובות לי. אין גם אתר שמלמד django בעיברית, והמקורות שעוסקות בבניית addons לjoomla בעיברית הם די מעטים. אני לא אוכל אותם בלי מלח, אבל אוכל. דווקא בגלל שcss לא מדובר בנושא שנורא מעניין אותי, או נורא קשור לעבודה שלי, לא ממש בא לי להשקיע את המאמץ.
חוץ מזה, השאלה הייתה לא בהכרח עבורי. בתחום הזה ישנם מעצבים לא מעטים, והם אלה המכתיבים את שיטות עיצוב האתרים בארץ. ביניהם יש די אנשים שלא אוכלים אנגלית בלי מלח, כי לא ממש מדובר בדרישת סף (מה שאי אפשר להגיד על מתכנתים).
September 8th, 2007 at 1:34 pm
אחלה של תגובה אופיר, בהחלט נתת לי כלים לבניית מתדולוגיית המאמר הבא, שינחה ויראה בניית עמוד בפועל, משלב סקיצת הJPG ועד הסוף- עמוד CSSי שלם ויפה.
September 16th, 2007 at 10:44 am
יישר כח על היוזמה.
כרגע המאמר נראה כמו רשימת מכולת או רשימת טיפים למביני דבר.
אשמח אם תרחיב אותו ותוסיף תבלינים - סיפורים עסיסיים מהשטח, דוגמאות, והתנסויות אישיות.
September 19th, 2007 at 1:18 am
“כותרות תמונות אשר אתם רוצים שתהינה טקסטואליות למען נגישות מנועי חיפוש, אך שיראו את התמונה ולא את הטקסט, ניתן לבצע באמצעות שיטה זו.”
?!
הלא בדיוק בדיוק בשביל הדבר הזה יש מאפיין alt לתגית img לא?
September 20th, 2007 at 1:17 am
הי דני.
קודם כל שלום וברוך בואך לבלוג שלי :).
דבר שני, ALT לדעתי תמיד יהיה חלש יותר מטקסט חי אמיתי היושב בתוך אלמנט.
עוד יתרון וצורך חשוב הוא שטקסט יהיה מקונן בתוך האלמנט ולא לסמוך בלבד על מאפיין הALT של תמונה זו הענקת נגישות למוגבלי נגישות.
אני לא סגור על הנושא הזה, כיצד screen reader קורא מאפיין alt, אבל אני בטוח שהוא תמיד יהיה חלש מטקסט חי, ואנשים הגולשים מלינוקס עם דפדפן Lynxs לא יראו את ערך הalt ובמקום זאת יראו את הטקסט עצמו בלבד, או חסרונו.
זוהי גם כתיבה נכונה. good practice.
ישנו עוד מצב בו שיטה זו- Image replacement, נכנסת לפעולה- שימוש בתמונות רקע.
קח תפריט ריק למשל, המורכב רק מאלמנטי LI ותמונות הרקע שלהם. זוהי כתיבה גרועה ומוזרה מבחינת HTML. אלמנט ריק שרק דפדפן שמריץ CSS מסוגל לפענח אותו.
דוגמא למה שאני מתאר:
זהו html מוזר וריק מתוכן, תרתי משמע. html כזה איננו מייצג כלום. html נכון אמור להחזיק מידע. אפיון ועיצוב התוכן הנעשה על ידינו אינו אמור לפגוע בעיקרון חשוב זה.
אם בחרנו לעצב את העמוד באמצעות CSS עלינו לזכור שהעיצוב הוא שכבה אחת של מהות הדף, מהות שניה וחשובה לא פחות היא תוכנו של הדף.
January 25th, 2008 at 3:07 pm
הבעיה העיקרית היא שאת רוב המפתחים והמעצבים זה לא מעניין.
בסופו של דבר המטרה שלהם היא להספיק פרוייקט בכמה שפחות זמן, ולעבור לבא אחריו או לשתות קפה.
מעבר לזה - אני לא חושב שנכון לא להשתמש לגמרי בטבלאות עבור מבנה הדף. אם הדף הוא במבנה טבלאי (טורים), אין סיבה שלא יעשה שימוש בטבלה.
זה לא אומר שצריך לחזור לשנות התשעים וה-100 טבלאות בעמוד. אבל 4-5 טבלאות בדף זה בהחלט סביר.
אני בהחלט מקפיד על קוד שעובד על כל הדפדפנים, תואם לתקן עד כמה שניתן (ולא תמיד ניתן) וכותרות (title,Hx ואחרים) הגיוניות ומתאימות, אבל אני די מסופק עד כמה שווה להשקיע יותר מזה.
ולגבי alt - הרבה פעמים הוא מכער את הדף ופוגע בחוויית המשתמש. עדיף לכתוב את הטקסט מתחת או מעל התמונה לענ"ד.
January 25th, 2008 at 4:58 pm
זה ויכוח ממש ארוך וגדול.
אני רק אציין כמה יתרונות לבנייה תקנית:
מוגבלי נגישות- בראש ובראשונה. אנשים אלה (על עיוורים אני מדבר כעת) באתר טבלאי לא מסוגלים לגלוש.
תגיד לי- את מי זה מעניין. 0.003 אחוז מהאוכלוסיה. (ולא שם לך מילים בפה, רק בשביל הדיון :)) אז נכון- יש לקוחות שאותם זה לא מעניין בגלל גודל שוק קהל היעד שלהם. אך כאשר מדובר באתר שפונה למליוני אנשים- חצי אחוז זה המון בני אדם.
אתרים ממשלתיים אמורים לתמוןך במוגבלי נגישות ללא קשר לקהל היעד שלהם. ושם טבלאות פשוט נועלות את הדלת על העיוור.
מסכים איתך שזה לא נוראי כלכך טבלה לעימוד כל הדף ובפנים תבנה תקני. אז על שביל זהב זה אני מוכן להתפשר. אבל עדיין, אם ניתן לכתוב תקני, למה לוותר?
אני מוכן לעשות תחרות איתך ולבנות את אותו עמוד מורכב באותו הזמן. יש מצב שאולי יקח לי יותק זמן ממך, אך כאשר נבוא בעוד שנה ונצטרך לתחזק את העמוד ולהחליף את כל העיצוב שלו, לי יקח הרבה יותר מהר ממך. טבלה אינה מודולרית, עיצוב תקני כן.
>> "הבעיה העיקרית היא שאת רוב המפתחים והמעצבים זה לא מעניין."
לא מסכים איתך בכלל. יותר ויותר אנשים עוברים לבניה תקנית. עם התפתחות הFrameWorks לJS, נוצרה דרישה גדולה יותר לכותבים תקניים. יותר ויותר אנשים מגלים את העולם הנפלא הזה ופשוט רוצים לקחת אליהם את סגולותיו ומה שזה תורם לסביבת הפיתוח שלהם.
לגבי טבלה גדולה שנועדה למטרת עימוד. אני מבין מדבריך שאתה איש מקצוע שבהחלט למד CSS וHTML תקני.
לגבי המבנה הסמנטי של העמוד - כמה אתה מתייחס לכך?
אני בזמן הפיתוח כל הזמן מסתכל על העמוד ללא CSS. כלומר באמצעות הDevelopers tool bar של FF אני מבטל את הסיאסאס (ctrl+shift+C) ורואה את ההיררכייה ומבנה הדף. דבר זה הוא מבחינתי אחד מ2 הדברים החשובים לי ביותר בHTML.
מבנה טבלאי לשלד הראשי פשוט יגרום לעמוד להיות פחות סמנטי ופחות קריא ע"י מנועי חיפוש, Screen readers (כפי שציינתי מקודם) וסתם- יהיה פחות יפה. מבחינתי.
גם אני רוצה לומר לך- שלום וברכה וברוך בואך לבלוג שלי
הרבה זמן לא כתבתי פה. אני שמח לראות אנשים שאכפת להם מתחום שלנו.
שלומי.
March 14th, 2008 at 12:05 pm
אין ספק שלומי שהמאמר שלך חזק ומסודר,אבל דוגמאות בכל דבר או להתחיל ללמוד איך לבנות את השלד וממנו להמשיך יכול להיות אחלה דבר במאמר.
מנסיון העבר שום תחום פיתוח לא התחלתי מאפס, תמיד באתי לטכנולוגיה קראתי קוד מוכן וממנו עבדתי/למדתי.
לכן קיוויתי לשם שינויי שאולי במאמר זה או אחר אתה תסביר מאפס צעד אחרי צעד איך בונים מה עושים וכולי (לא לעומק אבל בסיס כמו שהתחלת להסביר ל אלעד ב http://www.flashoo.co.il/community/index.php?act=ST&f=7&t=23938&s=8f8c6ed2b9d32e339d6245865c489d44
March 30th, 2008 at 12:01 am
לא מבין גדול (עדיין) בתיקניות, אבל יש סיבה שאני לא מצליח לקרוא את העמוד הזה מהפלאפון שלי? (נוקיה, סימביאן של סלקום)
אני לוחץ להמשך הכתבה ומגיע לאותו מקום (תקציר של הכתבה עם לינק להמשך).
March 30th, 2008 at 12:43 am
הי טומי (מקווה שלא טעיתי בשמך) וברוך הבא
הבלוג הזה מבוסס תבנית של וורדפרס. בדקתי בדיקה מינימלית על סמארטפון HTC פעם אחת, חוץ מזה כלום.
אשמח אם תשלח לי לאימייל שלי ב- neoswf at gmail com את שם המודל המדויק שלך ותיאור הבאג (או לפחות קצה חוט כדי לא להעיק עליך יותר מדי) ואנסה למצוא מכשיר כזה ולטפל בזה
עדיין תבנית WP זו לא אמורה לתמוך במכשירים סלולריים.
XHTML בהחלט רץ על כל הסביבות אבל הכל תלוי במפתח. כיצד הוא בנה את האתר ולאיזה מכשירים הוא כיוון אותו.
August 1st, 2008 at 10:32 am
הבעיה עשויה להיות גם פונקציה של ספק הגישה. סלקום למשל משתמשת ב-transcoder שמשבש את הקוד של האתר (בכוונה).
August 12th, 2008 at 12:47 am
לגבי גלישה דרך הנייד- הדרך הטובה ביותר היא לגלוש אל
google.com/xhtml
לשמור את העמוד, ודרך גוגל לחפש את האתרים אלהם רוצים לגלוש. גוגל מתרגם אותם להתקן נייד באופן מעולה.
כדאי לגלוש ממנו אל GMAIL ולשלוח לעצמך את הפאבוריט החשובים.
מסיבה כלשהי לא הרבה משתמשים בזה.
August 12th, 2008 at 1:08 am
ניל (מתנצל על האיחור בתגובה) ודיאטה- תודה רבה לשניכם על הטיפים.
August 13th, 2008 at 2:13 pm
אחלה מאמר... תודה
אני עדיין שבוי בקונספציות הישנות של הטבלאות. הגיע הזמן לרפרש...
August 15th, 2008 at 3:52 am
יקירי, אז הגיע הזמן להבין שאינך מספר 6 ואתה יכול לנפץ את הכבלים