یوشا آل ایوب

وبگاه دست نوشته ها و تجربیات شخصی

یوشا آل ایوب

وبگاه دست نوشته ها و تجربیات شخصی

یوشا آل ایوب

دکتر مصطفی چمران: می گویند تقوا از تخصص لازمتر است، آنرا می پذیرم، اما می گویم: آنکس که تخصص ندارد و کاری را می پذیرد، بی تقواست!

تبلیغات
Blog.ir بلاگ، رسانه متخصصین و اهل قلم، استفاده آسان از امکانات وبلاگ نویسی حرفه‌ای، در محیطی نوین، امن و پایدار bayanbox.ir صندوق بیان - تجربه‌ای متفاوت در نشر و نگهداری فایل‌ها، ۳ گیگا بایت فضای پیشرفته رایگان Bayan.ir - بیان، پیشرو در فناوری‌های فضای مجازی ایران
بایگانی

نکات و اصول مهم در طراحی/ساخت وب:

1- صفحات را با استفاده از استاندارد HTML4 و HTML5 به اندازه توان مرورگر طراحی کنید.

2- تمام صفحات ایستا(HTML) را بررسی، ارزیابی و آزمایش کنید تا عاری از مشکل باشد.

3- از نرم افزارهای مدیریت سورس(VCM) مثل Git, Svn, TFS برای مدیریت کدها و version ها استفاده کنید.

5- مکانیزم و شیوه کار پروتوکل HTTP رو کامل یاد بگیرید.

6- حتاالمکان با استفاده از CSS طرح بصری ایجاد کنید نه با تصاویر.

7- برای بالا بردن کیفیت و خوانایی کد، از توضیحات/Comment استفاده کنید.
<!-- Begin header --!>
<!-- End header --!>

<!-- Begin menu --!>
<!-- Menu::Main --!>
...
<!-- Menu::Links --!>
...
<!-- End menu --!>
...

8- قوانین CSS را در صفحات بررسی کنید و از استاندارد های CSS1 و CSS2 و CSS3 بهره بگیرید.

9- حتاالمکان از Stylesheet های External استفاده کنید.

<link type="text/css" href=".../print.css" rel="stylesheet" media="all" title="Print"/>

 

10- حالت نمایش صفحات رو با غیرفعال/Disable بودن CSS در مرورگر را حساب کنید. (مخصوصاً Tableless ها)

11- از Stylesheet های Print/چاپ هم استفاده کنید و قابلیت انتخاب به کاربر بدید.

12- از پیچاندن بیش از حد آدرسها و URL ها خودداری کنید. (پیچیدگی =! امنیت)

13- داده های ورودی توسط کاربر را بدقت بررسی و کنترل کنید.

14- از اجرا نمودن برنامه های Console/Shell از طریق اسکریپت(Client-side) جداً خودداری کنید.

15- از توضیحات/Comment های HTML در تگ <script> استفاده کنید.
<script>
<!--
...
--!>
</script>

16- با استفاده از تگ <noscript> وضعیت غیرفعال/Disable بودن جاوااسکریپت را مدیریت کنید.

17- حتاالمکان مشخصات و صفت های تگهای <style> و <script> را کامل بنویسید.
<script type="text/javascript" language="javascript1.5">
<style type="text/css" media="all" title="Common">


18- خطاهای جاوااسکریپت صفحات را رفع کنید.

19- از بکاربردن بیش از حد کدهای CSS و جاوااسکریپت خودداری کنید.

20- حتاالمکان از ActiveX ها و Plug-in ها استفاده نکنید.

21- اطلاعاتتون رو راجب robots.txt تکمیل و در سایتهاتون استفاده کنید.

22- کاربران را از استفاده کوکی برای ذخیره اطلاعات مطلع کنید.

23- از استفاده بیش از حد کوکی و ذخیره اطلاعات حساس/نمایشی درونشان خودداری کنید.

24- از استفاده موسیقی و صدا در صفحاتتان خودداری کنید. یا حداقل امکان انتخاب به کاربر بدهید.

25- از نشان دادن خطاهای unfrendly به کاربر خودداری کنید.

26- طوری طراحی کنید که تفاوت سلیقه ها را هم در نظر داشته باشد.

27- صفحات را برای موتورهای جستجو بهینه کنید. (search engine optimization / SEO)

28- شکل ظاهری سایت را با رفتار و نوع سایت طراحی کنید.

29- آدرس های ایمیل رو بصورت خام/plain نمایش ندید تا قربانی spam نشید.

30- از بکاربردن متون، تصاویر و پس زمینه های پررنگ/زننده خودداری کنید.

31- از بکاربردن Background های شلوغ و سنگین خودداری کنید.

32- جهت افزایش ایمنی سایت، سیستم HTTPS رو روی سرور پیاده سازی کنید.

33- هیچوقت Click-Jacking انجام ندید!

34- از متون خیلی ریز یا خیلی درشت استفاده نکنید.

35- سایت را طوری طراحی کنید که نیازهای افراد مبتدی، متوسط و حرفه ای را فراهم کند.

36- افرادی را برای تست سایت دخالت دهید که در فرایند طراحی "نبوده اند".

37- صفحاتی را برای Privacy و Term of use/service ایجاد نمایید.

38- پست الکترونیک یا فرم تماس را در دسترس قرار دهید.

39- انتقادات، پیشنهادات و نظرات(Feedback) کاربران را مشتاقانه پذیرا باشید.

40- ایجاد نقشه سایت(sitemap) و راهنما را فراموش نکنید.

41- از صفت alt در تگهای تصاویر، پیوندها و... استفاده کنید.

42- از استفاده بیش از حد Frame خودداری کنید.

43- Link های صفحات را چک کنید و از سالم بودنشان مطمئن بشید.

44- شکل ظاهری صفحات جداگانه را با شکل ظاهری صفحات اصلی یکنواخت کنید.

45- به املا و دیکته لغات دقت کنید.

46- برای تگهای Link از صفت title استفاده نمایید.

47- صفحات را از نظر محتوا و کدنویسی بروز کنید!

48- سایتها/Link های خارجی را در پنجره/صفحه خودتان باز نکنید.
<a href="http://domain/" target="_BLANK">Title</a>

49- صفحات رو طوری طراحی کنید که در مقابل حملات XSS و CSRF ایمن باشند.

50- جداول را خارج از Scrollbar مرورگر قرار ندهید. بطوری که اسکرول افقی ایجاد شود!

51- از قرار دادن تصاویر و فایلهای Download/Upload در پوشه اصلی/root سایت خودداری کنید.

52- آدرس تصاویر را از سایتهای External نگیرید.

53- حجم و نوع فایلهای Download را به کاربر نمایش دهید.
file.zip - 5 MB
Iran.mp3 - 7 MB
...

54- حتاالمکان از تگ <blink> استفاده نکنید.

55- کلمات را بصورت حروف بزرگ ننویسید. (این یعنی با صدای بلند حرف زدن)
WHAT IS YOUR NAME?!

56- دائماً از حروف Bold/توپر و اریب/Italic استفاده نکنید.

57- حد فاصل بین Link ها را رعایت کنید.
Index | About | Contact | FAQ | ...

58- عرض متون را محدود کنید.

59- تصاویر را برای بزرگ نمایی نکشید.

60- از تعدد رنگ استفاده نکنید.

61- صفحات را در تمام مرورگرها تست و بررسی کنید. IE Firefox Opera...

62- صفحات را برای رزولوشن های بالا طراحی نکنید!

63- از استفاده بیش از حد پنجره های Popup خودداری کنید!

64- سایت خود را در موتورهای جستجو و Link directory ها ثبت کنید.

65- چندین آدرس و URL قابل حدس و user friendly برای بخشهای مهم سایت ایجاد کنید.

66- بهتره صفت maxlength را برای فیلدهای متنی درنظر بگیرید.

67- صفتهای فرمها را بصورت کامل بنویسید و بحالت پیشفرض رها نکنید.

 

68- تصاویر رو فشرده و optimize کنید تا حجمشون کمتر بشه.

 

69- از سیستم های cache برای داده های استاتیک(عکس فایل js فایل css) استفاده کنید.


موفق باشید.

۹۱/۰۷/۱۵

نظرات (۲)

سلام استاد نازنین
منّت بر سرم گذاشتید با عنایتتان
اجرتان با یار مهربان ...
جسارتاً، استفاده از سرویسهای دیگر (مانند وبگذر) مستلزم درج کد در قالب است (بلاگفا که اینطوری بود)، در سرویس بلاگ بیان، این امکان چگونه فراهم است؟
لینکی که ارسال فرمودید خیلی عالی و جالب بود، ممنون ممنون ممنون! فقط این که از سرویسهایی که معرفی کردید، به نظرتان غیر از گوگل ریدر‌ کدامیک از همه بهتر است؟
خیلی لطف کردید! و امیدوارم از این توجّهتان به این شاگرد نوپای پرسؤال پشیمان نشوید!
خداوند یاور و پشتیبان و نگهدارتان ...
التماس دعا
پاسخ:
سلام

خواهش می کنم استاد، تشکر


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


در مورد اون لینک ها والا نمی دونم. چون کلاً از ریدر ها، خبرنامه ها و امثالش استفاده نمی کنم :)


باز هم اگر مشکلی یا سوالی بود در خدمتم
ممنون. سلامت باشید
سلام مهندس بزرگوار، روز و روزگارتان خوش، خدا قوت
حقیر، میهمان تازه‌وارد بلاگ بیان هستم، نمی‌دانم تصمیمم درست بود یا نه، ولی به شدّت به همفکری و راهنمایی شما پیشکسوتان صاحب‌فن نیازمندم ... .
در خصوص مورد ذیل هم ممنون می‌شوم از راهنمایی‌تان:
به غیر از گوگل ریدر، چه راهی پیشنهاد می‌کنید که مخاطبین وبلاگم، از به روز شدن مطالبم آگاه شوند؟ آیا در بیان امکان درج خبرنامه هست؟ چگونه؟
جسارتم را ببخشایید که نیامده، اسباب زحمت شده‌ام!
اجرتان با حضرت آفتاب ...
التماس دعا ...
پاسخ:
سلام و صفا بر شما

سربلند باشید استاد. خیلی خوشحالم که من و این وبگاه رو قابل دونستید - باعث افتخار هست

در مورد مشکلتون باید بگم که امکان درج خبرنامه داخلی توسط بیان فعلاً نیست و باید از دیگر سرویس های موجود در اینترنت استفاده کنید
در مورد گوگل ریدر هم چند مورد از [بهترین] این گونه سرویس ها در لینک زیر هستش که می تونید انتخاب کنید: (و رایگان هم هستند)

http://web.appstorm.net/roundups/top-10-web-based-rss-readers

باز هم اگر سوال و موردی بود در خدمتم
عمرتان با عزت
کاربران بیان میتوانند بدون نیاز به تأیید، نظرات خود را ارسال کنند.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">