تبلیغات
فرشته مهربانی - تمرینهای مناسب برای تازه کاران در HTML
فرشته مهربانی
هرچیزی که بخوای
صفحه نخست       پست الکترونیک          تماس با ما              ATOM            طراح قالب
گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من
درباره وبلاگ


هرچیزی که توبخوای درهرزمینه ای

مدیر وبلاگ :محمدامین نجفی فینی
نظرسنجی
به نظرشمادربازی جمعه پرسپولیس-استقلال چه نتیجه ای رغم خواهدخورد؟




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

در این مطلب سعی شده چند مورد مهم در مورد طراحی و برنامه نویسی وب سایت که ممکن است مورد بی توجهی تازه کاران قرار بگیره تذکر داده شود. رعایت کردن این موارد در بهتر کردن کارایی وب سایت شما بسیار موثر خواهد بود.

البته فقط تازه کارها هم ممکن هست که این اشتباهات رو نداشته باشن و حتی خود من هم بعضی اوقات یکسری از این موارد رو فراموش میکنم

1. همیشه تگها را ببندید

چندی پیش ممکن بود مواردی این چنینی عادی به نظر برسد :

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

دقت کنید در کد بالا تگهای ol یا ul وجود ندارد و حتی تگ li هم بسته نشده است. اما امروزه به خاطر استاندارد سازی وب سایتها این کار کاملا اشتباه است و ممکن است باعث ایراداتی در سایت شما بشود. پس همیشه همه تگهای خود را ببندید :

<ul>
  <li>Some text here. </li>
  <li>Some new text here. </li>
  <li>You get the idea. </li>
</ul>

2. DOCTYPE درست انتخاب کنید

doctype

همیشه بسته به نوع نیاز خود بهترین DOCTYPE را برای اسناد خود انتخاب کنید، شما میتوانید در این پست اطلاعات بیشتری را در مورد DOCTYPE ها بدست آورید.

3. هیچوقت از Inline Style ها استفاده نکنید

بعضی مواقع که دارید روی کد خود کار می کنید ممکن است وسوسه انگیز باشد که برای دادن استایل از روش inline استفاده کنید :

بهتر است همیشه ابتدا کدنویسی ساختار سایت خود را تکمیل کنید و بعد به استایل دادن آن توسط فایل بیرونی CSS بپردازید :

در این پست می توانید اطلاعات بیشتری را در مورد انواع روشهای دادن استایل بدست آورید.

<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
#someElement > p {
  color: red;
}

4. فایلهای CSS بیرونی را در head قرار دهید

شما می توانید فایهای بیرونی CSS را هر جا که بخواهید قرار دهید. اما پیشنهاد می شود که این فایلها درون head قرار گیرند چون لود شدن صفحه ها افزایش می یابد.

<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

5. فایلهای javascript را در انتها قرار دهید

javascript

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

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. از inline javascript استفاده نکنید

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

7. همیشه Validate کنید

validate

ابتدا پلاگین Web Developer Toolbar رو برای فایرفاکس دانلود کنید، سپس از گزینه های Validate HTML و Validate CSS همیشه و به طور دائم استفاده کنید.

8. Firebug را دانلود کنید

firebug

این پلاگین فایرفاکس یکی از بهترین ابزارها برای برنامه نویسان و طراحان وب سایت است. توسط این پلاگین به راحتی می توانید کد جاوااسکریپت خود را دیباگ کنید و همه المانهای کد HTML و CSS را به راحتی بررسی کنید و تغییر بدهید. حتما دانلود کنید !

9. از Firebug استفاده کنید

firebug

به طور متوسط کاربران از 20 درصد از تواناییهای فایرباگ استفاده می کنند، شما میتوانید با چند ساعت وقت گذاشتن از درصد بیشتری از تواناییهای این ابزار فوق العاده استفاده کنید ، برای این منظور از منابع زیر استفاده کنید :

10. تگها را با حروف کوچک بنویسید

کد شما در این حالت هم کار می کند :

<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>

اما بهتر است همیشه از حروف کوچک استفاده کنید :

<div>
<p>Here's an interesting fact about corn. </p>
</div>

11. از تگهای h1 تا h6 استفاده کنید

یکی از بهترین عادتهایی که می توانید بکنید این است که از این 6 تگ به درستی استفاده کنید، چون هم برای موتورهای جستجو خوب است و هم رتبه سایت شما را بهتر می کند.

<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>

12. اگر وبلاگ می سازید از h1 برای عنوان استفاده کنید

h1

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

13. yslow را دانلود کنید

yslow

یاهو برای فایرباگ پلاگین عالی ساخته است که توسط آن میتوانید به نقاط ضعف وب سایت خود پی ببرید و آنها را بهینه کنید. این پلاگین را نیز حتما دانلود کنید.

14. navigation را درون تگ ol قرار دهید

navigation

هر وب سایتی یک navigation دارد، شما میتوانید این قسمت را به صورت زیر کدنویسی کنید :

 <div id="nav">
  <a href="#">Home </a>
   <a href="#">About </a>
   <a href="#">Contact </a>
 </div>

اما روش بهتر این است که این قسمت را درون تگ ol و li قرار دهید :

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

15. یاد بگیرید چگونه IE را هدف قرار دهید

چه بخواهید و چه نخواهید همیشه هنگام کدنویسی با IE سروکله خواهید زد. یکی از بهترین روشها این است که ابتدا کد CSS را کامل بنویسید، سپس برای قسمتهایی که در Internet Explorer به مشکل میخورید یک فایل CSS جداگانه تهیه کنید و آنرا فقط برای IE اجرا کنید :

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->

کد فوق می گوید که اگر مرورگر کاربر IE بود و نسخه آن کمتر از 7 بود این کد را اجرا کند، اگر میخواهید خود IE 7 هم شامل شود به جای lt عبارت lte را به کار ببرید.

16. یک برنامه برای کدنویسی انتخاب کنید

coda

چه روی پی سی کار کنید و چه روی مک همیشه انتخابهای عالی برای کدنویسی دارید، در زیر لیستی را مشاهده می کنید که تعدادی از این برنامه ها را معرفی کرده است :

عاشقان پی سی :

عاشقان مک

17. وقتی وب سایت تمام شد آنرا فشرده کنید

compress

توسط zip کردن فایلهای CSS و JS میتوانید تا 25 درصد حجم آنها را کاهش دهید. توسط ابزارهای آنلاین زیر می توانید این کار را انجام دهید :

JavaScript

CSS

18. بریدن، بریدن و بریدن

cut

شما معمولا عادت دارید که وقتی کدنویسی می کنید هر پاراگراف را درون یک div قرار دهید و آن div را هم درون یک div دیگر قرار دهید. اما بهتر است وقتی کدنویسی سایت تمام شد به کدها دوباره نگاه بندازید و تگهای اضافی که استفاده نکرده اید را پاک کنید تا سرعت سایت شما افزایش یابد.

19. همه تصاویر به alt نیاز دارند

به خاطر accessibility و validation حتما لازم است که alt در تصاویر قرار داده شود، فراموش نکنید !

بد :

<IMG SRC="cornImage.jpg" />

بهتر :

<img src="cornImage.jpg" alt="A corn field I visited." />

20. سورس را ببینید

source

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

21. همه المانها را استایل بدهید

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

22. فتوشاپ یاد بگیرید

photoshop

وقتی کدنویسی HTML و CSS را یاد گرفتید بهتر است فتوشاپ را هم یاد بگیرید، چون ابزاری بسیار کارآمد و مفید برای طراحی وب سایت خواهد بود. از منابع زیر می توانید استفاده کنید :

23. همه تگهای HTML را یاد بگیرید

خیلی از تگهای HTML هستند که به ندرت از آنها استفاده می کنید، اما این بدین معنی نیست که نباید آنها را یاد بگیرید. برای مثال تگ abbr و یا cite .

24. در فضای مجازی فعال شوید

وقتی یک مطلبی را در مورد طراحی و برنامه نویسی وب سایت فرا گرفتید چرا آنرا با بقیه قسمت نمی کنید ؟ یک وبلاگ بسازید و دانسته های خود را آموزش دهید ! خیلی از کاربران هستند که کمتر از شما می دانند. با این کار هم به بقیه کمک کردید و هم می توانید دانسته های خود را هم محک بزنید.

25. از CSS Reset استفاده کنید

این مورد یکی از مواردی است که همیشه سر استفاده کردن یا نکردن آن بحث است، به نظر من بهتر است یکی از فایلهای معروف CSS Reset را دانلود کنید و طبق آن برای خود یک فایل جداگانه بسازید مثلا از فایل Eric Mayer استفاده کنید. اگر تنها فایل را کپی کنید به درستی نخواهید فهمید که این کدها دقیقا چه کاری را انجام می دهند.

26. تراز کنید

lineup

یکی از بهترین تمرینها این است که سعی کنید در طرحهایتان همه المانها با هم تراز باشند.

27. slice کردن قالب فتوشاپ

slice

حال که کدنویسی HTML و CSS را فرا گرفتید و قالب خود را در فتوشاپ طراحی کردید باید یاد بگیرید که چگونه میتوانید قالب فتوشاپ خود را برای کدنویسی تکه تکه و یا همان slice کنید. خیلی کار سختی نیست فقط نیاز به تمرین دارد، می توانید از منابع زیر هم برای یادگیری استفاده کنید :

28. از framework ها هنوز استفاده نکنید

فریم ورکهای CSS و Javascript خیلی عالی هستند اما برای شروع مناسب نیست که از آنها استفاده کنید. وقتی شما در ابتدای یادگیری CSS هستید استفاده کردن از این فریم ورکها شما را بیشتر گیج می کند. این فریم ورکها برای برنامه نویسان حرفه ای است که میخواهند کمی در زمان صرفه جویی کنند.

منبع : nettuts






صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
امکانات جانبی