وبلاگ شخصی علی فرهادی

امروز میخوام یک معما طرح کنم.

آدرس زیر رو نگاه کنید و سعی کنید کد HTML صفحه رو بدست بیارید. (برای دیدن صفحه از Firefox یا Opera استفاده کنید.)

http://farhadi.ir/test/nohtml.php

منتظر نظرات هستم …

آپدیت :
معما حل شد.
تمام آنچه در این صفحه دیده میشه با استفاده از CSS تولید شده و از قابلیت لینک کردن فایل CSS به صفحه از طریق Header استفاده شده. که البته در IE کار نمیکنه.
در کل با این روش نمیشه یه صفحه کامل طراحی کرد چون با CSS نمیشه کد HTML تولید کرد. مگر اینکه از حقه قدیمی قرار دادن کد javascript در CSS استفاده کنید که اون هم فقط در IE و نسخه های قدیم opera کار میکنه. نتیجه اینکه این روش شاید کاربردی نباشه ولی برای سرکار گذشتن خوبه!

طراحی سایتی سازگار با تمام مرورگرها مستلزم داشتن دانش کافی در رابطه با سازگاری مرورگرها با استانداردهای وب است. و در این راستا استفاده از سایت WebDevout.net به عنوان مرجع می تونه کمک بسزایی در جهت کسب اطلاعات مورد نیاز در این زمینه باشه.

این سایت سازگاری ورژن های مختلف مرورگرها رو با استاندارد های HTML و CSS و DOM و ECMAScript به تفصیل مورد بررسی قرار داده.

به عنوان مثال شما می تونید سازگاری یک attribute خاص از یک element رو با ورژن های مختلف مرورگرها از طریق اطلاعات موجود در این سایت بررسی نمایید.
اطلاعات این سایت بقدری دقیقه که به عنوان مثال در مورد یک attribute به ذکر فقط سازگار بودن یا نبودن اکتفا نکرده وعدم سازگاری در شرایط خاص را هم لحاظ کرده است.

جدول زیر آمار کلی سازگاری مرورگرهای پرطرفدار با استاندارد های وب رو نشون میده.

همونطور که در جدول فوق می بینید IE7 نسبت به IE6 هیچ پیشرفت چشمگیری نداشته و با سایر مرورگرها فاصله زیادی داره.
اما رقابت بین FireFox و Opera شدیده و باید منتظر بود و دید Opera 9.5 و FireFox3 در این رقابت چه میکنند.

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

امروز می خوام ابزاری رو معرفی کنم که گرچه در مقابل فایرباگ بسیار امکانات ناچیزی داره ولی از هیچی بهتره و اگر بخواهیم مقایسه کنیم امکاناتش در حد DOM Inspector پیشفرضی هست که همراه فایرفاکس نصب میشه. این ابزار با نام اختصاری IEDevToolbar محصول خود مایکروسافته. از اونجایی که هیچکس حاضر نیست وقت ارزشمندش رو صرف تولید ابزارهای اینچنین برای IE بکنه، مایکروسافت مجبور شده خودش این کار رو انجام بده. در هر صورت دستشون درد نکنه.

و اما این هم لینک دانلود :

Internet Explorer Developer Toolbar

فایرباگ کاملترین ابزار دیباگ و تست کردن CSS و HTML و JavaScript است که به صورت extension بر روی فایرفاکس نصب میگردد.
این ابزار سرعت کار رو برای توسعه گران وب به ویژه برای کارهای Web2 تا چندین برابر افزایش میده.

از قابلیت های این ابزار میتوان به موارد زیر اشاره کرد:

• یک دیباگر کامل برای جاوااسکریپت با امکان تعریف breakpoint عادی و شرطی و تعریف watch و با قابلیت trace کردن کد ها و بالاخره قابلیت profiler برای profile گرفتن در یک بازه زمانی خاص.
• error console برای نمایش خطاهای جاوا اسکریپت وCSS و XML , همچنین برای اجرای کد های مورد نظر روی document جاری.
• امکان inspector برای HTML و امکان مشاهده style های اعمال شده بر روی هر element و همچنین امکان مشاهده property ها و متد های هر element
• امکان ویرایش کردن کدهای HTML و CSS
• امکان مشاهده و browse کردن ساختار شی گرای document و browse کردن object های تعریف شده و ویرایش property های آنها.
• و در نهایت امکانmonitor کردن ترافیک شبکه مرتبط با document جاری به عبارت دیگر امکان مشاهده تمام request های انجام شده در صفحه با تمام جزئیات آنها و مشاهده request های ای جکسی و همچنین امکان مشاهده زمان لود شدن و حجم تک تک request ها.

این extension رایگان و opensource بوده و میتونید اون رو از آدرس http://getfirebug.com دانلود کنید.

همونطور که میدونید ادیتور خوب برای javascript کمیابه. اکثر ادیتور هایی که برای html وphp وجود دارند از javascript هم پشتیبانی میکنند ولی هیچ کدوم auto complete و outline درست و حسابی ندارند. و ادیتور درست و درمونی هم که ویژه جاوا اسکریپت طراحی شده باشه و به پای Spket برسه وجود نداره.

Spket ادیتوری ویژه javascript می باشد که هم به صورت پلاگینی برای eclipse و هم به صورت مستقل قابل استفاده است.
این ادیتور auto complete خیلی خوبی برای javascript داره که من تا به حال نظیرش رو ندیدم و خیلی برای برنامه نویسی شی گرامناسبه (به عنوان مثال برای کار با فریم ورک prototype).
یکی از ویژگی های جالب این ادیتور قابلیت طراحی extension برای firefox و پشتیبانی از فایل های XUL وXBL هستش.
ضمنا auto complete برای استفاده از ExtJS و jQuery و YUI هم در این ادیتور تعبیه شده که کار با اونها رو خیلی راحت میکنه.

خلاصه این ادیتور از همه لحاظ کامله و چیزی کم نداره. مخصوصا اگر به صورت plugin برای php eclipse نصب بشه یک IDE کامل برای توسعه وب خواهید داشت.

Spket برای استفاده غیر تجاری رایگانه و میتونید اون رو از آدرس http://www.spket.com دانلود کنید.
ضمنا این برنامه با java نوشته شده و برای نصب احتیاج به J2SE داره که میتونید اون رو از سایت java.com دانلود کنید.