یک نمونه طراحی Cross-Browser

[alireza_s_84]

سلام دوستان:
خیلی وقته پست هایی میبینم که همشون به نوعی ارتباط نزدیکی به موضوع استاندارسازی یک صفحه وب برای عمل کردن بصورت مستقل از مرورگر (به اصطلاح Cross-Browser)
دارند و امروز توی یک تاپیک به یکی از دوستان قول دادم که یک نمونه طراحی TableLess و بر اساس اصول طراحی W3C رو در تاپیک جدیدی قرار بدم تا دوستان استفاده کنند.
چون در انجام کار عجله زیادی کردم لذا بی شک میتونه بهتر و اصولیتر هم باشه اما همین نسخه مزایای زیر رو داره:
پشتیبانی در تمامی مرورگرهای معروف از جمله IE + Opera + Mozilla + Chrome + Safari
پشتیبانی FullPageWidth در تمامی رزولوشن ها از 1024*768 به بالا
چگونگی اجرای افکت موس اور بدون استفاده از جاوا اسکریپت برای یک المنت.
رعایت اصل سند خوش ترکیب یا به اصطلاح Well Formated Document
رعایت روانشناسی رنگ ها در طراحی قالب.
تا حدودی قواعد مربوط به User Friendly و Accessibility نیز در این سند مشاهده میشه (البته نه بطور کامل)
در این سند از جاوا اکریپت استفاده نشده ولی بزودی سندی رو با جاوا نیز قرار میدم تا دوستان چگونگی اجرای اسکریپت ها رو مستقل از مرورگرها هم مشاهده بکنند.
در این سند از تکنیک CSS Image Sprites برای کاهش درخواست بارگزاری عکس ها از سرور استفاده شده.
نظرات یادتون نره.
ایرادات (که فکر نکنم زیاد باشن) رو حتما بگید تا حداقل یکبار برای همیشه فروم رو از شر سوالات تکراری راحت کنیم)

[Keramatifar]

دوست عزیز
آفرین، در زمینه Page Layout و Cross Browser روح W3C رو شاد کردی ... :تشویق:
مواردی که در نگاه اول به چشمم اومد رو ذکر می کنم:

- تگ های Heading که در SEO خیلی موثر هستند رو توی سورس صفحتون ندیدم
- اگر بجای MarkUp المنت ها از Phrase المنت ها استفاده کنی هم به استاندارد نزدیکتر میشی و هم توی SEO تاثیر بسزایی داره
اگر می خوای اصول روانشناسی رنگها در طراحی وب رو رعایت کنی:


بهتره روی Background سفید برای ContentText ها از رنگ خاکستری بجای رنگ مشکی استفاده کنی
بهتره در مورد رنگبندی Header صفحه و اون بنر بالای سایت یه تجدید نظری بکنی
قضیه ی Color Focus توی طراحی صفحه رعایت نشده
سعی کن Background صفحه رو از اون رنگ سفید مطلق تغییر بدی
رنگ Background مربوطه به اون Marquee و رنگ آیکون های مختلفی که توی منو استفاده کردی باعث شده سایتت یکم حالت رنگین کمانی پیدا کنه

موفق باشی

[alireza_s_84]

سلام مهندس با تشکر:

تگ های Heading که در SEO خیلی موثر هستند رو توی سورس صفحتون ندیدم
در ابتدای هدر از متاتگ ها برای همین منظور استفاده شده ولی چون جنبه آموزشی داشت از شلوغ کردن صفحه خودداری شد و این یک صفحه به نسبه توانایی پیاده سازی همه ی موارد موثر در SEO رو نداره . البته این فقط یک نمونه است در حالیکه در یک وب سایت واقعی تمامی موارد مربوط به بهینه سازی صفحه برای موتورهای جستجو بهتر قابل پیاده سازی هست. (نکته دیگری به ذهنم نمیرسه که توضیح بدم)


بهتره روی Background سفید برای ContentText ها از رنگ خاکستری بجای رنگ مشکی استفاده کنی
بله خوب این هم امکانپذیره و تایید میکنم.

بهتره در مورد رنگبندی Header صفحه و اون بنر بالای سایت یه تجدید نظری بکنی
بنر رو فقط به منظور چگونگی تقسیم برای نمایش در FullPage گذاشتم و در یک وب سایت واقعی بی شک بنر باید گویای خیلی چیزها مثل موضوع سایت ، جذب کاربر و ... رو داشته باشه ولی تنها هدف آشنا کردن دوستان با این نکته بود که چگونه میتونن بنری رو طراحی کنن که با تغییر رزولوشن از گوشه ها فاصله نگیره و به اصطلاح fullPageWidth رو رعایت کنه.

قضیه ی Color Focus توی طراحی صفحه رعایت نشده
من به این قضیه زیاد اعتقاد ندارم هرچند زیاد روش بحث میشه ولی اگر شما نکته ای به ذهنتون میرسه رو بیان کنید چون من در مورد Color Focus تنها مطالعه کردم و اصلا در طراحی پیاده سازی نکردم.

سعی کن Background صفحه رو از اون رنگ سفید مطلق تغییر بدی
کاش رنگی هم پیشنهاد میکردین چون من برای یک وب سایت رسمی مثل این بنظرم سفید یا خاکستری خوبه ولی باز منتظر ایده شما هستم.

رنگ Background مربوطه به اون Marquee و رنگ آیکون های مختلفی که توی منو استفاده کردی باعث شده سایتت یکم حالت رنگین کمانی پیدا کنه
بله عکس زمینه شو اشتباهی آپلود کردم رنگ زمینه ش آبی کم رنگ بوده ولی این رو به جاش آپلود کردم.
باز هم برای بهتر شدن منتظر نظرات شما هستم.
در صفحه جدید که طراحی کردم و قراره بیشتر روی جاوا اسکریپت تمرکز کنم حتما به این موارد بیشتر دقت میکنم.
موفق باشید

[Keramatifar]

در ابتدای هدر از متاتگ ها برای همین منظور استفاده شده ولی چون جنبه آموزشی داشت از شلوغ کردن صفحه خودداری شد و این یک صفحه به نسبه توانایی پیاده سازی همه ی موارد موثر در SEO رو نداره .

چون تو این نمونه بیشتر تکیه ی شما بر روی قضیه ی Cross Browser بوده، عدم توجه به SEO قابل قبوله، ولی حتی اگه سایت شما 1 صفحه هم باشه بازم میشه خیلی از موارد مربوط به SEO رو داخلش رعایت کرد



من به این قضیه زیاد اعتقاد ندارم هرچند زیاد روش بحث میشه ولی اگر شما نکته ای به ذهنتون میرسه رو بیان کنید چون من در مورد Color Focus تنها مطالعه کردم و اصلا در طراحی پیاده سازی نکردم.

قضیه ی Color Focus با استناد به برخی مباحث روانشناسی رنگها مثل:
- تاثیر زیاد رنگها روی احساسات بیننده در ۹۰ ثانیه اول بازدید
- تاثیر رنگ در ترغیب بیننده به خرید یک جنس از شما
- تاثیر رنگ در ایجاد تصویر ذهنی مثبت از شما
- و از همه مهمتر : ارسال یک پیام ذهنی توسط رنگ به کاربر
در کل حرف حسابش اینه که باید با توجه به طیف رنگی که در سایت استفاده کردیم، رنگ بخشی از طرح رو طوری تنظیم کنیم که دارای Color Weight بیشتری نسبت به بقیه قسمتها باشه تا Focus دید کاربر رو بلافاصله بعد از اینکه چشمش به سایت شما افتاد در اختیار بگیره (و 100 البته باید مهمترین پیام های سایت نیز توی همین قسمت قرار داشته باشه)
البته با استناد به همین مواردی که در مورد روانشناسی رنگها در بالا آوردم، باید در انتخاب رنگی که برای این منظور استفاده میشه نیز دقت بسیاری بشه



کاش رنگی هم پیشنهاد میکردین چون من برای یک وب سایت رسمی مثل این بنظرم سفید یا خاکستری خوبه ولی باز منتظر ایده شما هستم.

بازهم با استناد به روانشناسی رنگها:
سفید اشاره دارد به صداقت ، پاکیزگی ، صمیمیت ، ملایمت و معاصر بودن چیزی . سفید بهترین رنگ برای بک گراند های وب است . در تجارت سفید رنگ خستگی گیر و انرژی بخش است
منتها مسئله اینه که تجربه نشون داده اگر بجای رنگ سفید مطلق از رنگ سفید با Brightness کمتر استفاده بشه خیلی بهتره (یعنی یه جورائی در حد خیلی کم رنگ سفیدتون به خاکستری بزنه ...)

[alireza_s_84]

منتها مسئله اینه که تجربه نشون داده اگر بجای رنگ سفید مطلق از رنگ سفید با Brightness کمتر استفاده بشه خیلی بهتره (یعنی یه جورائی در حد خیلی کم رنگ سفیدتون به خاکستری بزنه ...)
بله کاملا موافقم بی شک در طراحی بعدی اعمال خوام کرد
از توضیحات خیلی خوبتون ممنونم

[battak]

یه سوال داشتم:
تگ هایی که استفاده میشه، از کجا میدونین چی کار میکنه؟
مثل تگ marquee، یا a. که کارای جالبی میشه باهاشون کرد. من تمام تگ هایی که یاد گرفتم از این ور اونور بوده. میخوام بدونم جایی هست که اکثر تگ های مفید رو یه جا گرد هم آورده باشه؟؟ و برا مبتدی هایی مثل من مفید باشه؟؟
به چند جا هم از فروم سر زدم و چیزی پیدا نکردم و یا سوالاتی که بودن بدون جواب بودن. امیدوارم استادان گرامی کمک کنن.
ممنون
در ضمن alireza_s_84 خیلی ممنون از بابت پروژه ی خوبتون. خواستم بصورت علنی هم تشکر کنم.

[alireza_s_84]

یه سوال داشتم:
تگ هایی که استفاده میشه، از کجا میدونین چی کار میکنه؟
مثل تگ marquee، یا a. که کارای جالبی میشه باهاشون کرد. من تمام تگ هایی که یاد گرفتم از این ور اونور بوده. میخوام بدونم جایی هست که اکثر تگ های مفید رو یه جا گرد هم آورده باشه؟؟ و برا مبتدی هایی مثل من مفید باشه؟؟
به چند جا هم از فروم سر زدم و چیزی پیدا نکردم و یا سوالاتی که بودن بدون جواب بودن. امیدوارم استادان گرامی کمک کنن.
ممنون

سلام دوست عزیز:
شما میتونید توی سایت http://www.w3schools.com تمامی این تگ ها رو با خصوصیات و هر چیزی که برای طراحی یک صفحه استاندارد نیاز دارید بصورت ساده و شفاف یاد بگیرید.

در ضمن alireza_s_84 خیلی ممنون از بابت پروژه ی خوبتون. خواستم بصورت علنی هم تشکر کنم.
خواهش میکنم شما لطف داری نسبت به من امیدوارم تو کارتون موفق باشید

[green_pm]

سلام
ممنون از آموزشی که گذاشتید.
چند سوال برام به وجود اومده ،
شما وقتیکه این صفحه را طراحی کردید ،ابتدا کدهای صفحه ی css را نوشتید یا ابتدا از html آن و نوشتن div ها شروع کردید؟(نمیدونم برای طراحی از کدوم قسمت شروع کنم)

چرا برای درست کردن قسمت منوی اصلی از چندین div تو در تو استفاده کردید؟
این کدها را به صورت دستی یا توسط ادیتور خاصی نوشتید؟
شرمنده سوالام زیاد شد،من تازه طراحی وب را شروع کردم .

[alireza_s_84]

سلام
ممنون از آموزشی که گذاشتید.

سلام دوست عزیز خواهش میکنم

شما وقتیکه این صفحه را طراحی کردید ،ابتدا کدهای صفحه ی css را نوشتید یا ابتدا از html آن و نوشتن div ها شروع کردید؟
کلا قبل از طراحی یک صفحه باید یک ذهنیت کلی در مورد طرح داشته باشیم اگر هم روی کاغد طرح رو بکشیم که خیلی عالی میشه.
بعد از هدر صفحه شروع به کار میکنیم و هر قسمت رو که نوشتیم همون موقع با Css فرمت بندی میکنیم . معمولا یک صفحه از سه بخش اصلی تشکیل میشه : Header + Body + Footer
Header که معمولا بنر و گاهی اوقات یک باکس جستجو بیشتر نیست بعضی اوقات منو هم توی هدر قرار میگیره ولی در کلا بیشتر طراحان هدر رو بنر در نظر میگیرن.
قسمت Footer هم جز معرفی و قاون کپی رایت و گاهی لین به صفحات اصلی چیزی نداره و با یک div ساده تموم میشه.
اما مهمترین قسمت Body هست که اکثر کار رو به خودش اختصاص میده و باد توی فلرمت بندی اون خیلی دقت کرد.
در کل ابتدا کدهای Html نوشته میشه بعد به سراغ فرمت بندی با Css میریم مگر اینکه از قبل Css آماده ای داشته باشیم.

چرا برای درست کردن قسمت منوی اصلی از چندین div تو در تو استفاده کردید؟
خوب div هم مانند یک جدوله و برای فرمت بندی اون ناگزیریم که از چند div تو در تو استفاده بشه شما هر div رو به مانند یک tr در نظر بگیرید با این تقاوت که رندر شدن یک div بطور بسیار محسوس و چشمگیرتر و سریعتر از یک جدوله.

این کدها را به صورت دستی یا توسط ادیتور خاصی نوشتید؟
من محیط راحی رو ویژوال استدیو قرار دادم هرچند بعضی افراد میگن نمیشه توش طراحی کرد ولی میبینید که بهترین فرمت بندی رو توی همین محیط انجام دادم در کل فرقی نمیکنه شما از چه ادیتوری استفاده میکنید مهم اینه که شما بدونید هر تگ چه کاری انجام میده و چه جوری رندر میشه ویژوال استدیو به مراتب بهتر از فرانت پیجه چون من 3 سال تموم با فرانت پیج کار کردم ولی ویژوال استدیو یک چیز دیگه ست.
بعضی اوقات کدها دستی نوشته میشه و بعضی اوقات هم درگ میکنیم دیگه ولی درگ کردن راحتتره. شما میتونید تگ رو درگ کنید و بعد به صورت دستی اونو دلخواه تغییر بدین.

شرمنده سوالام زیاد شد،من تازه طراحی وب را شروع کردم .
به نظر من طراحی سمت سرور رو همه بلدن ولی اینکه نتیجه چی به مرورگر میاد مهمه اگر روزی بیاد که مرورگرها سخت بگیرن میبینید خیلی از سایتها از کار میوفتن.
شما برای یادگیری سعی کن تگ ها رو توی NotePad تایپ کنی اینجوری درکت از کدها بیشتر میشه و خیلی راحت یاد میگیری من خودم اینجوری یاد گرفتم و الان خیلی هم راحتتر از فرمت بندی با جدول یک صفحه رو با div طراحی میکنم.
شما هر سوالی در این زمینه داشتی من در خدمت هستم
امیدوارم موفق باشی

[mohsen200339]

با سلام

ممنون از نمونه سایتی که گذاشتید .

1- من نسبت به اندازه مشکلی دارم . فایلی که فرستاده ام بخشی از یک سایته که یک عنوانی به نام خرداد 1389 داره که عکسی در بک گراند آن است با رزولوشن 198*35. مشکل این جاست که با تغییر رزولوشن ویندوز عکس از حالت نرمال خارج می شود و گوشه های آن دیده نمی شود . در ضمن می خواهم با هر رزولوشنی با جدول زیر آن هماهنگی باشد . ولی فقط در روزلوشن 1280*768 درست نشان میدهد .

2- با چه دستوری می توان بنر سایت را چسبیده به سایت قرار داد به صورتی که با تغییر رزولوشن فاصله ای بین آن دو نیافتد؟

لطفا راهنمایی بفرمایید .

ممنون

[famarini]

با سلام
در صورت امكان كل صفحه را قرار دهيد تا بررسي شود.
موفق باسيد

[rana-writes]

سلام
ممنون از نمونه خوبی که گذاشتین
من یه سوال دارم
من توی سایتم از مستر پیج استفاده کردم، مستر پیجهام رو با div طراحی کردم، اما برای صفحاتی که ازش ارث بری میکنه به جای div از Table استفاده کردم
دقیقا مثل نمونه ای که گذاشتین اون قسمتی که مربوط به پست میشد و در مورد هاست بود، منم اینطوری عمل کردم
مثلا اگه توی صفحه ای گرید ویو دارم که با Template ایجادش کردم، اون رو با Table ساختم
حالا اینطور طراحی به نظرتون مشکلی ایجاد میکنه؟
ممنون از راهنماییتون

[alireza_s_84]

سلام
ممنون از نمونه خوبی که گذاشتین
من یه سوال دارم
من توی سایتم از مستر پیج استفاده کردم، مستر پیجهام رو با div طراحی کردم، اما برای صفحاتی که ازش ارث بری میکنه به جای div از Table استفاده کردم
دقیقا مثل نمونه ای که گذاشتین اون قسمتی که مربوط به پست میشد و در مورد هاست بود، منم اینطوری عمل کردم
مثلا اگه توی صفحه ای گرید ویو دارم که با Template ایجادش کردم، اون رو با Table ساختم
حالا اینطور طراحی به نظرتون مشکلی ایجاد میکنه؟
ممنون از راهنماییتون
خواهش میکنم دوست عزیز:
شما ببینید استفاده از جدول و یا لایه ها (Table Or Div) مشکلی برای صفحه بوجود نمیاره بلکه در برخی عوامل استفاده از جدول سبب کاستی هایی میشه که مهندس کرامتی توی این تاپیک (http://barnamenevis.org/forum/showthread.php?t=221842) در موردش بحث کرده است.
و اما اینکه بجای Template کنترل Grid شما از جدول استفاده کرده باشید بخودی خود ایرادی نداره ولی من همیشه از DataList با template Div استفاده میکنم. اینجوری انعطاف پذیری بالاتری داره ولی خب دردسرهای خاص خودش رو هم داره مثلا اعمال سیاست صفحه بندی ، کد زدن بیشتر برای ایجاد جدول و محروم شدن از برخی خصوصیات غنی کنترل GridView است ولی در هر حال من از گرید در کارهام اصلا استفاده نمیکنم.
ولی در کل هیچ مشکلی پیش نمیاد و شما میتونید قالب کلی سایت رو با Div ایجاد کنید و برخی محتویات رو با جدول ها و این یک طراحی ایده آل محسوب میشه ولی به تاپیکی که اشاره کردم حتما دقت کنید.
موفق باشید