10
Sep 2006
אהלן
החלטתי לאתגר אתכם בחידת HTML יפה.
להלן מצורף צילום מסך של מבנה HTMLי כלשהוא שהכנתי מבעוד מועד.
אנא העלו לי את פתרונותיכם למבנה HTML זה, והאיש בעל הקוד הרזה ביותר, יעיל, אסטתי ויפה, יזכה בהערכה רבה מאוד מאיתנו. (על תשורה נאה יותר איני יכול לחשוב. :))
שלומי
September 10th, 2006 at 10:36 pm
בסוף הלכתי על שימוש ב-CSS3 וסקריפט שמדמה את ההתנהגות הזו באקספלורר. הגישה הכי נקייה מבחינת מארק-אפ.
ניסיתי עוד דרכים אחרות אבל זו נראית לי הדרך הכי טובה אם אתה רוצה להשתמש בהכנסת נתונים דינאמיים לרשימה ולא הכנסה ידנית.
יש עוד כמה פתרונות שעבדתי עליהם, זה הכי נקי
September 10th, 2006 at 10:37 pm
אוף, לא ממש אינטואיטיבי הממשק הזנת כתובת, חשבתי שיש כאן שדה ללינק אבל מסתבר שזה לאתר הבית
הנה הלינק ל-test case:
http://octava.co.il/yuval/test_column/2_column_test.html
המשך שבוע נהדר,
יובל
September 10th, 2006 at 11:12 pm
קודם כל יובל, אשמח לשמוע הסבר על השימוש בתכונות CSS3 שהשתמשת בקוד שלך.
דבר שני, בבניית אתר לוקחים בחשבון את כל המחירים שעליך לשלם, וקוד JS כזה הוא מחיר יקר מדי. זה קוד כבד מאוד, ועוד ליישום מטרה כלכך פשוטה- רשימה המחולקת לשני עמודות.
רציתי להמתין ולראות עוד נסיונות של אנשים, אבל אני מעלה את הדוגמא שלי http://www.webcssdesign.34sp.com/me/listTest.html, כי אני חושב שהיא רלוונטית לדיון שלנו (והיא מאוד דומה למה שהעלאת אתה בכוונה הכללית שלה, עם שינויים קטנים).
הקוד שלך יפה יותר מבחינת תמיכה בדינמיות, אך השאלה היא האם מבחינת markUp זה נכון יותר? כי ישנן שם 2 עמודות, ואני שואל האם 2 עמודות הינן 2 רשימות או רשימה אחת?
שמחתי לראות ולגלות שבסלקטור background-position, ערך תכונת גובה 50% ניתן לייצוג גם כCenter.
האם -moz-column-count: 2;
-moz-column-width: 190px;
הם מאפייני CSS3 שדיברת עליהם?
אשמח לשמוע
שלומי
September 10th, 2006 at 11:51 pm
חשבתי שמדובר באתגר רק בצד לקוח
בכל מקרה, המאפיינים שכתבת הם אכן מאפיינים של CSS-3.
הרצון שלי לעשות הכל ברשימה אחת נובע מהצורה שבה אנחנו מסתכלים על הרשימה. לא סתם כתבת את החלקים של הרשימה כפיסקה אחת שבורה לחלקים. הם כולם מציינים איזשהו המשך לוגי. אם אתה שובר את הרשימה לשניים אתה בעצם קוטע את ההמשך הלוגי של הפסקה.
קוד ה-JS שנתתי הוא אכן מגושם, אבל הוא בא לפתור את הבעיה של הסמנטיות. למה עלינו להשתמש בשתי רשימות בכדי להציג רשימה אחת?
באותה הדרך אפשר ע”י שבירה של המבנה הלוגי של הרשימה לעשות משהו בסגנון הזה:
http://octava.co.il/yuval/test_column_take_2/2_column_test.html
שוב, לא לגמרי טוב… מי שישתמש בקורא מסך לא יבין על מה אנ י מבלבל לו את השכל ולמה יש קפיצות של טקסט.
אשמח אם תגדיר יותר לעומק את מטרת האתגר בכדי שנוכל לחשוב על הדרך הכי סמנטית והכי נכונה לכתיבת הקוד
September 11th, 2006 at 12:03 am
אהבתי את השימוש בfloat ורוחב. רק חבל שזה אינו אינטואטיבי ואינו משרת התנהגות רשימה טבעית…
ההגדרה:
מבנה הHTML הרזה והיעיל והקטן והיפה ביותר שמוחך מסוגל לעלות על הדעת. אין חשיבות או צורך בתמיכה בדינמיות, או שבעצם עדיף שקוד זה יהיה סטטי לחלוטין- למען השגת מטרת האתגר- קוד HTML הרזה ביותר שיש.
גדרים: זרימת הטקסט מלמעלה למטה, ולא לצדדים. העמודה השניה היא המשך הראשונה.
האמת- חייב להודות, היום בצהרים נתקלתי בצורך ברשימה מסוג זה, שהתבליט שלה יושב במרכז גובה הרשומה שלו. דבר שלעולם לא הייתי אמור לבצע. ורציתי להשיג כלכך קוד קטן שחפרתי עד שירד לי האסימון על מיקום גובה הbackGround באופן יחסי - 50%. לקח לי המון זמן להגיע לזה.
רואה מה קורה לכותב אבסולוטית כמוני? דיברנו כבר על הימצאות בתבניות שמונעות ממך להתפתח, כמו המסגרת שMS שמו אותנו בפיתוח לרשת…
(אך במחשבה שניה, אנחנו מתקרבים לקצה, לא?)
September 11th, 2006 at 12:14 am
אוקיי, עוד ניסיון מעניין (וגם תומך בהוספה דינאמית אם יש בה צורך).
http://octava.co.il/yuval/test_column_take_3/2_column_test.html
בנוסף לכך הרשימות עצמן נמצאות באותה הרשימה הכוללת כאשר הטור השני הוא רשימת בת, או המשך של הרשימה בטור הראשון.
גם רעיון