IE8 و استانداردهای وب

استاندارد

این روزها خبر (تقریبا) مسرت بخشی برای طراحان و توسعه دهندگان وب منتشر شده. خبر اجرای موفقیت آمیز آزمون Acid2 در IE8! اما آیا واقعا برای همه مسرت بخشه؟

سازگاری کامل با استانداردها و Backward Compatibility
اول اینکه ادعای تیم توسعه IE مبنی بر اجرای درست آزمون، به این معنی نیست که همه مشکلات IE برطرف شده باشه. همونطور که خودشون اشاره کردند، آزمون Acid2 همه جوانب استانداردهای وب رو پوشش نداده و اجرای صحیحش نمیتونه تضمینی برای انطباق کامل با استانداردها باشه.
IE مشکلات ریز و درشت بسیاری در موتور Rendering خودش داره که اصلاح برخی از این مشکلات به معنی از دست دادن Backward Compatibility هست که توسعه‌دهندگانش با امیدواری خبرش رو میدند.
مشکل IE فقط عدم پشتیبانی از استانداردها نیست. که این موارد به خودی خود مشکل آفرین نیستند. چون با اضافه شدن امکاناتی جدید به مرورگر، سایتهایی که قبلا بدون در نظر گرفتن این امکان طراحی شدند تغییری نخواهند کرد. مشکل، درست جایی شکل میگیره که IE طرز تفسیر و نمایش غلط و متضاد با استانداردها داره. این موارد (که کم هم نیستند) برای رفع شدن، Backward Compatibility را زیر سوال میبرند. چون سایتی که سابق بر این به اشتباه و غیر استاندارد، تنها متکی بر نمایش صحیح در IE از شکل خاصی از کدنویسی استفاده کرده، در نسخه جدید با تغییر رویه تفسیر و نمایش اون کد (استاندارد شدن تفسیر) به شکل دیگه‌ای نمایش داده میشه و باعث میشه به هم بریزه.
برای مثال، در IE نسخه 6 و قدیمی‌تر، قابلیت hover فقط برای عنصر لینک (a) تعریف شده بود. در حالی که در CSS2 برای هر عنصری میشه hover (و سایر pseudo selectorها) را تعریف کرد.
این قابلیت در IE7 اضافه شد. سایتهایی که قبل از انتشار IE7 طراحی شدند یا از hover برای عناصر غیر از لینک استفاده نکردند. یا در صورت استفاده جزئی و تزئینی بوده. همین سایتها با IE7 -که این قابلیت تازه اضافه شده را داره- اغلب مشکلی نخواهند داشت و شاید کمی بهتر هم به نظر برسند. اما همه موارد به این شکل نیست. خیلی از مشکلات IE نظیر box model، تفسیرهای نادرست float و موارد متعدد دیگری هستند که به سادگی و با حفظ سازگاری با نسخه‌های قبلی قابل اصلاح نیستند.
ممکنه بازهم توسعه دهندگان IE دست به شیرین‌کاری‌هایی مثل hasLayout یا Conditional Comments بزنند. اما به هر حال سایتهای غیر استاندارد قدیمی، (همونطور که با تغییرات اندک IE7 دیده شد) اغلب بدون تغییر، درست نمایش داده نمیشوند.

روند توسعه روبه‌جلو یا بازی تبلیغاتی؟
اما از جنبه دیگه‌ای هم میشه به این موضوع نگاه کرد. مایکروسافت طی سالهای اخیر به خاطر انحصار نسبی در بازار مرورگرها (سهم حدودا 90 درصدی) نیاز چندانی به رقابت و نوآوری در مرورگر قدیمی و کهنه و خارج از رده خودش (IE6) نمیدید. با ظهور فایرفاکس و فشارهای بیشتر شرکتهایی مثل Opera، مایکروسافت IE7 را به عنوان یک مُسکن موضعی منتشر کرد. چیزی که تقریبا میشه بهش مجموعه patchهای IE6 گفت! اما طی چند ماه اخیر اتفاقات دیگه‌ای افتاده که باعث شده مایکروسافت مجددا خودش را وارد جنگ مرورگرها بکنه و به هر ترفندی جایی بین رقبا باز کنه.
در نیمه نوامبر 2007 شرکت Apple نسخه جدید موتور Rendering مرورگر Safary، یعنی Webkit را معرفی کرد. با امکانات جدید و پیشرفت‌های زیادی در زمینه کیفیت و امنیت و انطباق با استانداردهای وب. در همین روزها اولین نسخه بتا از نسخه جدید مرورگر Firefox بنیاد Mozilla منتشر میشه. که همراه خودش امکانت جدید و بهبود چشمگیری در بازده و کیفیت داشته و همچنین موتور Renderingش را ارتقا داده. بعد از اینها به شکایت شرکت Opera از مایکروسافت میرسیم که درست چند روز قبل از اعلام خبر IE8 و Acid2 طرح شده.
شرکت Opera شکایتی در اتحادیه اروپا علیه مایکروسافت طرح کرده که به دو موضوع اصلی اشاره میکنه. یکی همان دعوای قدیمی برای جدا کردن IE از ویندوز یا حذف IE به عنوان مرورگر پیش‌فرض سیستم عامل مایکروسافت. و دیگری اعتراض به استاندارد نبودن مرورگر IE. هر چند که Opera مورد دوم (استانداردهای وب) را بهانه و دست آویزی برای پافشاری بر ادعای اول خودش قرار داده. ولی به هر حال عامل تحریک کننده مایکروسافت هست.
عده‌ای انتشار این خبر از جانب مدیر تیم توسعه IE را واکنشی مستقیم به شکایت Opera میدونند. که باعث میشه مایکروسافت در این دعوا در جایگاه بهتری قرار بگیره. ولی منهم مثل Joe Wilcox، عقیده دارم این اقدام مایکروسافت پاسخی به همه عوامل ریز و درشت جنگ مرورگرها بوده. در واقع ممکنه این ادعای تیم توسعه IE در حد یک بازی تبلیغاتی باشه یا حداقل در خوشبینانه ترین حالت منجر به تغییرات نه چندان اصولی مثل IE7 بشه. من قصدم این نیست که کل این موضوع را زیر سوال ببرم، بلکه فکر میکنم این ادعا (یا واکنش) کمی اغراق شده و آرمانیه، تا اجرا شده و دست یافتنی!

از IE8 هنوز هیچ جزئیاتی منتشر نشده و انتشار اولین نسخه بتای IE8 در نیمه اول سال 2008 وعده داده شده، چیزی که با توجه به سابقه مایکروسافت ممکنه به اواخر 2008 هم برسه. به همین خاطر هنوز نمیشه اطمینان داشت ادعای پشتیبانی از استانداردهای وب (یا حتی ادعای اجرای موفقیت آمیز Acid2) به واقعیت نزدیک باشه.
به هر حال آرزوی تمام طراحان وتوسعه دهندگان وب اینه که استانداردهای وب به طور گسترده در مرورگرها و ابزارهای طراحی پشتیبانی بشه تا مدت زمانی که همواره صرف رفع ایراد طراحی در مرورگرهای مختلف میشه، صرف پرداختن به خلاقیتها و نوآوری‌های طراح بشه.
من هم به امید اون روز، چشم به جنگ مرورگرها دارم. شاید روند کاهش کاربران IE یا شکایتها، قلقلکی به مایکروسافت بده. 🙂

CSS Rollover

استاندارد

یکی از افکتهای معمول در طراحی وب ایجاد دکمه ها و کلیدهایی است که در حالتهای مختلف تغییر میکنند.
به عنوان مثال در زمان قرار گرقتن ماوس بر روی آنها (Hover) ، کلیک ماوس و حالت فعال بودن لینک تغییر شکل یا تغییر رنگ میدهند. به این کلیدها اصطلاحا Rollover گفته میشود.
روشهای زیاد و متفاوتی برای ایجاد چنین اثر و افکتی وجود دارد ، مانند استفاده از فلش ، استفاده از جاوا و … و استفاده از CSS !
در این مقاله به شما نحوه ساخت یک Rollover ساده با CSS را آموزش میدهیم. در اینجا ما فرض میکنیم که میخواهیم یک منوی افقی برای سایت خود بسازیم .
ابتدا باید به فکر گرافیک و شکل ظاهری و طرز ایجاد عکسها باشیم. شکل ظاهری کلید به شما و طرح سایر بخشهای سایت بستگی دارد در این مورد فقط توصیه میکنم که کار گرافیکی خود را با زیرکی و ظرافت نامحسوسی در قالب کادرهای یک قد مستطیلی جای دهید و با یک منحنی 5 پیکسلی که از کادر بیرون زده کار خود را سخت و پیچیده نکنید 😉
برای افکت قرار گرفتن ماوس ، کلیک و حالت فعال بودن لینک معمولا از تغییر رنگ و حداکثر از تغییر حالت متن از معمولی به درشت استفاده میشود و در این مورد هم بستگی به سلیقه شما دارد.
طرح گرافیکی مورد نظر من به این صورت است :
Figure #1 به خواندن ادامه دهید

چطور یک قالب را فارسی کنیم ؟

استاندارد

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

نسخه مخصوص چاپ با CSS

استاندارد

برای نمایش سایتها رسانه های گوناگونی وجود دارد که هر یک خصوصیات خاص خود را دارند. و شما به عنوان یک طراح وب یا مدیر سایت میتوانید نحوه نمایش سایت را در این رسانه ها کنترل کنید و ازنمایش صحیح سایت در هر یک از این رسانه ها مطمئن باشید.
یکی از این رسانه ها چاپ است. اگر شما صاحب سایت مرجعی هستید یا مقالات و محتوای متنی زیادی در سایت شما وجود دارد و کاربران حق چاپ این مطالب را دارند قطعا تمایل دارید که نسخه قابل چاپ مناسبی به کاربران خود ارائه کنید.
طراحان و توسعه دهندگان وب روشهای گوناگونی برای ایجاد نسخه مناسب چاپ برای وب سایتها دارند. با استفاده از برنامه های سمت سرویس دهنده و یا با شیوه نامه های چاپ ! بله شما با استفاده از CSS میتوانید نمایش سایت خود را در هر رسانه ای کنترل کنید.
چاپ جزو رسانه های ایستا است و مطالب بعد از چاپ قابل تغییر نیستند. و قطعا در نسخه چاپ شده از سایت شما بخشهای زیادی هستند که معنی خود را از دست میدهند.
به عنوان مثال تبلیغاتی که صرفا برای کلیک کردن در نظر گرفته شده ، عناصر گرافیکی صفحه و تصاویر متحرک نمایشی ، منوهای مختلف سایت و یا هر عنصری که مناسب چاپ نیست. و لازم است که این موارد از نسخه مخصوص چاپ شما حذف شوند. و شما مطالب مورد نظر را در یک ستون واحد و با رنگ زمینه و اندازه فونت مناسبی داشته باشید.
و حالا چطور این موارد را اجرا کنیم ؟
قبل از توضیح مراحل انجام لازم به تذکر است که اگر سایت شما بر اساس استانداردهای وب طراحی شده و بخش نمایشی (Presentation) توسط CSS کاملا از بخش ساختاری (Structural) سایت جدا باشد شما با کمترین زحمت و در کوتاه ترین زمان میتوانید نسخه مخصوص چاپ داشته باشید. 😉

مراحل کلی از این قرار است :

  1. نمایش و دسته بندی بخشهای مختلف سایت
  2. جدا کردن عناصر دربرگیرنده مطالب
  3. مخفی کردن کردن عناصر و بخشهای اضافی توسط CSS
  4. شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS

که در ادامه به شرح هر مورد میپردازیم.
به خواندن ادامه دهید

طراحی با استانداردهای وب (سر آغاز )

استاندارد

سلام
WebStandards یا استانداردهای وب برای طراحی سایتها موضوعیه که بهش علاقه دارم و از اهمیت زیادی برخورداره!
البته من هنوز خودمو طراح وب نمیدونم و ادعایی در این زمینه ندارم … فقط امیدوارم که بتونیم با بحث و تبادل نظر در این باره چیزی یاد بگیرم …
اولین قدم در راه استاندارد شدن درک اهمیت و فوائد این استاندارد هست واینکه اصلا به چه دردی میخوره؟!
اصولا در هر رشته کاری و صنعتی که امروزه انجام میشه برای تشخیص صلاحیت و کارایی یک واحد صنعتی یا کاری استانداردی مشخص میشه که اگر اون واحد شرایط و ضوابط اون استاندارد رو بتونه پیاده بکنه و رعایت کنه امتیازی نسبت به سایرین خواهد داشت. ( حداقل امتیازش قدرت تبلیغ رویه اون مدرک استانداردشه!)

دقیقا مثل محیط واقعی خودمون ما در محیط مجازی هم چنین استانداردهایی رو داریم و یا باید داشته باشیم ..
همونطور که شما موقع خریدن کنسرو ماهی تن چند بار چک میکنید که شرکت معتبر باشه، پروانه ساخت داشته باشه و از همه مهمتر آرم استاندارد داشته باشه… به همون نسبت باید حساس باشید که آیا سایتی که میبینید استاندارد هست یا خیر! به خواندن ادامه دهید

Whatever:Hover

استاندارد

سلام
حتما برای شما هم تا به حال پیش اومده که بخواید برای بخشهایی از سایتتون و یا سایتی که طراحی میکنید افکتی بزارید و زیبا تر و کاربرپسندترش کنید …
و اصولا اگر به حجم صفحه و سرعت لود هم اهمیت بدید استفاده از CSS میتونه گزینه مناسبی باشه نسبت به فلش یا بعضی برنامه های جاوا و …
تویه این مطلب میخوام براتون درباره افکت Hover صحبت کنم ..
نحوه کاربردش و امکاناتش و محدودیتها و راه حلهاش !
حتما اسم Hover رو برای رنگ متن لینکها زمانی که موس رویه اونها قرار میگیره رو شنیدید ( در واقع OnMouseOver Event هست )
ولی امروز برای طراحی های حرفه ای تر کاربرد Hover فقط به لینک محدود نمیشه .
در واقع شما میتونید برای هر عنصری از صفحتون استفاده کنید ..
به عنوان مثال برای Paragraph یا یک Box به صورت DIV یا …
و البته طبق معمول Internet Explorer با این افکت مشکل داره و در حقیقت اصلا نمایش نمیده .
راه حلی برای IE موجوده که بعدا توضیح میدم ..
برای درک ساده تر براتون مثالی میزنم :
فرض کنید شما میخواید یک منوی خیلی ساده برای یک سایت طراحی کنید…
شما تصمیم میگیرید با یک لیست غیر ترتیبی (Unordered List یا UL ) کارتون رو انجام بدید و میخواید که افکتی براش داشته باشید …
خیلی ساده میتونید با تعریف یک کلاس و حالت Hover اون کلاس این کارو رو انجام بدید …
نمونه کد CSS :

.menu ul li {
background: #CCCCCC;
height: 18px;
margin: 3px 0px 2px;
padding: 0px 5px 0px 5px;
border-right: 7px solid #666666;
font: normal 12px Georgia, "Times New Roman", Times, serif;
}

و برای قسمت Hover :

.menu ul li:hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-left: 7px;
}

و داخل صفحتون کد HTML به این شکل :


<ul>Menu 1
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

قرار میگیره !
نمونه این منوها رو تویه این صفحه میتونید ببینید . هم افقی هم عمودی .
به همین شکل شما میتونید این افکت رو برای جدولها ، متنها و … استفاده کنید …
و اما بخش مهمتر موضوع IE و سازگاری با اون هست …
معمولا اگر بخواید همچین افکتی رو برای IE داشته باشیم باید از Event های onmouseover و onmouseout و .. استفاده کنیم که در واقع برنامه نویسی جاوا هست …
ولی مشکل اینجاست برای صفحات بزرگ و بخشهای مختلف استفاده زیاد از این موارد برای افکتمون خیلی جالب نیست و علاوه بر بالا بردن حجم ، سرعت Rendering صفحه هم پایین میاره و کدهامونو شلوغ میکنه !
حالا راه حل اینجاست !
خیلی ساده میشه با استفاده از یک فایل جاوا اسکریپت خارجی و CSS این مشکل رو حل کرد ..
و در واقع این فایل هم دقیقا از همون Event هایی که گفتم استفاده میکنه ولی احتیاجی به تکرار اونها برای هر مورد نیست !
و تنها نکتش برای استفاده اینه که شما تویه فایل CSS تون دقیقا اون خواص مورد نظرتون رو که میخواید در حالت Hover داشته باشید رو به صورت کلاسی به همون نام تکرار میکنید !
برای مثال برای منویی که بالا گفتم میشه :

.menu ul li.hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-right: 7px;
}

و به همین صورت .
که اون فایل جاوا میاد و از تویه CSS تون این کلاسهایی که با .hover ختم میشه را به عنوان Event ه onmouseover قرار میده و مشکل حل میشه !

دریافت فایلهای نمونه و فایل جاوا

امیدوارم به دردتون بخوره …
موفق و پیروز باشید…
علی

تغییر چهره Gmail !

استاندارد

سلام
من به شخصه دوست دارم همیشه محیطی که توش زندگی میکنم و وقتمو میگذرونم تا حدی سفارشی یا Customize بکنم …
براتون جالبه که بدونید میشه محیط صفحات جیمیل رو با استفاده از CSS تغییر رنگ و تا حدی تغییر چهره داد !
البته تا جایی که میدونم فعلا برای اونایی که با فایرفاکس کار میکنن این امکان هست ! 😉
برای این کار باید این موارد رو انجام بدید :

  1. افزودنی موسوم به URLid رو باید رویه فایرفاکستون نصب کنید !
  2. بعد فایل CSS مربوطه رو بگیرید و با سلیقه خودتون ویرایش کنید !
  3. با استفاده از راهنمای خوده موزیلا مسیر شاخه پروفایلتونو پیدا کنید : profile folder
  4. فایل CSS مذکور رو در شاخه chrome داخل فولدر پروفایل کپی کنید و اسمشو به userContent.css تغییر بدید *
  5. فایرفاکس رو ببندید و دوباره باز کنید !
  6. به سایت Gmail برید و حال کنید !

* اگر که همچین فایلی در اون فولدر موجود بود میتونید ایندوتا فایل رو با هم قاطی کنید یعنی محتویات یکی رو به انتهای بعدی اضافه کنید !
من خودم الان این تغییرات رو اعمال کردم و دارم با جیمیلم حال میکنم …
شما هم امتحان کنید جالبه !
منبع اصلی من : Presistent
موفق باشید …