PDA

View Full Version : آموزش: ترفندها و تکنیکها برای طراحی صفحات استاندارد و سازگار با مرورگرها


qartalonline
دوشنبه 25 شهریور 1392, 17:29 عصر
سلام

هدف از ایجاد این تاپیک آموزش برخی ترفندها و تکنیکهاست که با استفاده از آنها بتوان قالب طراحی نمود که علاوه بر استاندارد بودن در همه مرورگرها (به ویژه ie) به درستی نمایش داده بشه.
در واقع در این تاپیک آموزش داده میشه که از چه کدهای استفاده نکنیم یا از چه کدهای استفاده کنیم + معرفی کدهای استاندارد جایگزین.

چند نکته :
- در این آموزشها فرض براین است که کاربر در حد متوسطی با html , html5 , css ,css3 آشنا میباشد.
- لطفا از پرسیدن سوالات بی ربط و کلی (مثلا : قالب من تو ie به هم ریخته نشون میده چی کارکنم) خودداری کنید.
- دوستان هم میتونند اگه تو این زمینه مقاله یا ترفند آموزشی یا ... داشتند اینجا قرار بدند.
qartalonline
دوشنبه 25 شهریور 1392, 21:47 عصر
سعی کنید همشیه ترتیب و نظم کدنویسی رو تو هر زبانی رعایت نمایید.
این کار چند تا حُسن داره وقتی کدهاتون نظم و ترتیب داشته باشه :
- از نگاه کردن به کدهاتون لذت می برید و زود خسته نمیشید
- هنگام برطرف کردن خطا یا نیاز به ویرایش سرعت انجام کار بالا میره
- اگه نیاز باشه رو کدتون فرد دیگه ای کار کنه به راحتی و در کمترین زمان این کار انجام میشه
- ...


کدنویسی مرتب و منظم در html :
در html با استفاده فضای خالی و سطر خالی بین تگها میتوان به کدها نظم و ترتیب داد.
نکته ها:
- در تگهایی که در چند سطر نوشته میشوند کد مربوط به باز و بسته شدن تگها رو از یک ستون شروع به نوشتن کنید.
- تگهایی که شامل تگ والد هستند (داخل تگ دیگری قرار دارند) به اندازه ۴ فضای خالی فاصله از تگ والد قرار بدید.مثلا تگ div دارید که از ستون ۸ شروع شده و میخواید در داخل این div لینک قرار بدید تگ a رو در سطر بعد از باز شدن تگ div و از ستون ۱۲ شروع به نوشتن تگ بکنید.
- بین تگها که از گروه های مختلفی هستند (مثل تگ مربوط به هدر و محتوا) از یک یا چند سطر خالی استفاده کنید.

نمونه کد منظم:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>

<header>
<div>
<a>link</a>
</div>
</header>

<nav>
<ul>
<li><a>link</a></li>
</ul>
</nav>

<footer>
<div>
<a>link</a>
</div>
</footer>

</body>
</html>
Omid Jackson
دوشنبه 25 شهریور 1392, 22:25 عصر
عذر میخوام که پست اسپم میذارم (درصورت خوانده شدن گزارش بزنین مدیرا پاک کنن)
به نظرم مطالبی که قرار میدین رو pdf کنین بذارین تا دوستان در دسترسشون باشه
qartalonline
سه شنبه 26 شهریور 1392, 18:35 عصر
نوع سند یا doc type

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

نوع سند در html5 بصورت زیر مشخص میشه:

<!doctype html>

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


در مورد قرار دادن فایل pdf عرض کنم که چون حجم آموزش ها پایینه فایلهای pdf بعد از 3 - 4 تا آموزش قرار داده میشه.
tadayoni
چهارشنبه 27 شهریور 1392, 10:33 صبح
نکاتی در رابطه با نوشتن css بهتر
http://tadayoni.ir/%d9%86%da%a9%d8%a7%d8%aa%db%8c-%d8%af%d8%b1-%d8%b1%d8%a7%d8%a8%d8%b7%d9%87-%d8%a8%d8%a7-%d9%86%d9%88%d8%b4%d8%aa%d9%86-css-%d8%a8%d9%87%d8%aa%d8%b1/
e_a_23
جمعه 29 شهریور 1392, 01:32 صبح
سلام

https://www.tinfoilsecurity.com/blog/cross-browser-development-tips-css
https://www.tinfoilsecurity.com/blog/cross-browser-development-tips-javascript
http://www.vsellis.com/5-css-tips-for-cross-browser-compatibility/
دانیال دزفولی
جمعه 29 شهریور 1392, 22:54 عصر
درمورد article aside section هم لطفا صحبت کنید ممنون
qartalonline
جمعه 29 شهریور 1392, 23:31 عصر
درمورد article aside section هم لطفا صحبت کنید ممنون

در مورد چیشون توضیح میخواید؟
دانیال دزفولی
شنبه 30 شهریور 1392, 09:03 صبح
فرقشون با div
tadayoni
شنبه 30 شهریور 1392, 11:53 صبح
دوست عزیز article و ... اشیاء مفهومی هستند که توی HTML 5 معرفی شدند
توی این نسخه از html سعی شده به اشیاء موجود در صفحه مفهوم داده بشه
مثلا برای header دیگه نیازی نیست یه div بذاریم و id اون رو برابر header قرار بدیم و استایل واسش بنویسیم
توی html 5 اومدن و تگ header رو ایجاد کردن و این باعث شده کدهای صفحه مفهومی تر بشه . یعنی هرکی به کدها نگاه میکنه سریع متوجه میشه که این بخش مربوط به عنوان سایت و ... هستش
در مورد article و باقی موارد که گفتید هم همین مسئله بوجود اومده
توی این مقاله که یکی از دوستان عزیز تو وبلاگش گذاشته توضیح کوتاهی داده شده که مفید هستش
http://karimimohsen.blogfa.com/post-9.aspx