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

  • ارسال پاسخ   امتیاز موضوع:
    • 2 رأی - میانگین امیتازات: 5
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی نکات و اصول مهم در طراحی/ساخت وب.
    نویسنده پیام
    Y.P.Y آفلاین
    ناظم کل
    *******

    ارسال‌ها: 2,837
    تاریخ عضویت: ۱۳۸۷ دي ۲۸
    اعتبار: 89
    تشکرها : 2098
    ( 4608 تشکر در 2106 ارسال )
    ارسال: #1
    نکات و اصول مهم در طراحی/ساخت وب.
    نکات و اصول مهم در طراحی/ساخت وب:

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

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

    3- اغلب کاربران مرورگر را بخاطر بروز خطا/مشکل مقصر نمي دانند، سايت را مقصر مي دانند!

    5- حتاالمکان با XHTML هماهنگ شويد تا آينده صفحات وبتان تضمين شده باشد.

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

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

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

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

    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- مشکل مرورگرهایی که از جاوااپلت پشتیبانی نمی کنند را مدیریت کنید.

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

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

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

    25- کاربر و طراح یکی نیستند!

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

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

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

    29- کاربران از سایت استفاده می کنند، و نه مرورگر!

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

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

    32- کاربران انتظار حداکثر بازده از حداقل کار را دارند.

    33- مدت زمانی که کاربر منتظر می ماند برابر باشد با پاداش/نتیجه مطلوبی که میگیرد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    49- از پس زمینه های روشن و واضح استفاده کنید.

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

    51- حتاالمکان از تصاویر PNG استفاده نکنید(فعلاً). (چون IE6 با ترنسپرنت PNG مشکل داره. البته با ترفندهایی قابل رفع هست)

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

    53- آدرس تصاویر را از سایتهای خارجی(External) نگیرید!

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

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

    56- متنها را بصورت حروف بزرگ ننویسید(این یعنی با صدای بلند/فریاد با خواننده حرف زدن)
    WHAT IS YOUR NAME?!

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

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

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

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

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

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

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

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

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

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

    67- همیشه صفت MaxLength را برای فیلدهای متنی درنظر بگیرید.

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

    موفق باشید.
    __________________________________________________________________________
    وبلاگ: Yousha.Blog.ir

    کسی که دین را با شخصیت ها بشناسد، همان شخصیت ها او را از دین خارج می سازند. امام صادق (ع)

    یادمون نره اون مغز کوچیک هایی که موقع اشغال افغانستان میگفتن حالا که آمریکا اومده چند سال دیگه افغانستان بهشت منطقه میشه...
    15سال گذشت!
    (آخرین ویرایش در این ارسال: ۱۳۹۱ تير ۲۸ ۰۲:۰۷ عصر، توسط Y.P.Y.)
    ۱۳۸۸ اسفند ۲۱ ۰۳:۲۰ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : admin payam parvane php Null faghani cyletech parazitt molana amir.s paull Goback micky41 Amir.Z hidensoft RaminMT pary_daryayi miladr24 Amir-M Bojbaj
    cyletech غایب
    علیرضا اسکندرپور شوفری
    *****

    ارسال‌ها: 2,261
    تاریخ عضویت: ۱۳۸۸ فروردين ۸
    اعتبار: 42
    تشکرها : 1259
    ( 2238 تشکر در 1089 ارسال )
    ارسال: #2
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    70- تلاش بر ساختن صفحه ای مناسب برای خطاهای 404 کنید.
    (آخرین ویرایش در این ارسال: ۱۳۹۰ مرداد ۵ ۰۳:۵۴ عصر، توسط Y.P.Y.)
    ۱۳۸۹ خرداد ۲ ۰۹:۱۹ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : molana paull zoghal Y.P.Y RaminMT
    cyletech غایب
    علیرضا اسکندرپور شوفری
    *****

    ارسال‌ها: 2,261
    تاریخ عضویت: ۱۳۸۸ فروردين ۸
    اعتبار: 42
    تشکرها : 1259
    ( 2238 تشکر در 1089 ارسال )
    ارسال: #3
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    آخرین پست این تاپیک برای پارسال بود ولی من میخوام دوباره به اصطلاح بیارمش بالا
    نقل قول: 41- از صفت Alt در تگهای تصاویر، پیوندها و... استفاده کنید.
    این توضیح برای نگارش های پیش از HTML5 هست اما در HTML5 توضیح زیر صحیح تره:
    41- برای تصاویر فقط و فقط از alt (به معنی جایگزین برای تصویر) و برای لینک ها فقط و فقط از title استفاده کنید.
    73- از متا تگ http-equiv فقط برای مشخص کردن نوع محتوا و زبان (charset) استفاده کنید
    74- آیدی ویژه تگ هایی هست که فقط یک بار تکرار میشن و کلاس فقط ویژه تگ هایی که بیش از یکبار مورد استفاده قرار میگیرند
    74- از validator موجود در w3.org حتماً استفاده کنید تا ایرادات کد نویسی خود را برطرف کنید
    نقل قول: 42- از استفاده بیش از حد Frame خودداری کنید.
    این توضیح در HTML5 نقض می شود زیرا تگ iframe کاربردی ندارد و بعنوان یک تگ به اصطلاح زخمی یا خرابکار معرفی شده است و توصیه بهتر این است که هرگز از iframe در یک صفحه به منظور تقلب استفاده نکنید اما استفاده از iframe در یک پنجره با اندازه بزرگ و قابل مشاهده بطوری که کاربر بتواند آن را براحتی ببیند ایرادی ندارد اما هرچه کمتر بهتر.
    نقل قول: 9- حتاالمکان از Stylesheet های خارجی(External) استفاده کنید.
    این توضیح غلط نیست اما برای استایل هایی که زیاد سلکتور در آنها بکار رفته صحیح هست. اگر قرار است فقط یک تگ را استایل بدهید ، از استایل نویسی درون خطی (inline stylesheet) استفاده کنید یعنی با اضافه نمودن خصیصه style در تگی که از آن پشتیبانی می کند استایل آن را بنویسید.
    ۱۳۹۰ مرداد ۲ ۰۸:۵۳ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : Goback masoudmanson molana Y.P.Y RaminMT
    cyletech غایب
    علیرضا اسکندرپور شوفری
    *****

    ارسال‌ها: 2,261
    تاریخ عضویت: ۱۳۸۸ فروردين ۸
    اعتبار: 42
    تشکرها : 1259
    ( 2238 تشکر در 1089 ارسال )
    ارسال: #4
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    نقل قول: 17- مشخصات و صفت های تگهای<style> و <script> را کامل بنویسید.
    خصیصه language در عنصر script منسوخ شده در HTML5 پس دیگه نیازی به نوشتن اون ندارید.
    75- مقدار NOINDEX و FOLLOW برای خصیصه rel در تگ a صحیح نیست. برای محدود کردن روبات ها فقط INDEX و NOFOLLOW مقادیر درستی هستند. البته این برای HTML5 است.
    (آخرین ویرایش در این ارسال: ۱۳۹۰ مرداد ۸ ۰۲:۳۰ صبح، توسط cyletech.)
    ۱۳۹۰ مرداد ۸ ۰۲:۲۶ صبح
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : oia Y.P.Y RaminMT
    Y.P.Y آفلاین
    ناظم کل
    *******

    ارسال‌ها: 2,837
    تاریخ عضویت: ۱۳۸۷ دي ۲۸
    اعتبار: 89
    تشکرها : 2098
    ( 4608 تشکر در 2106 ارسال )
    ارسال: #5
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    نقل قول: 17- مشخصات و صفت های تگهای<style> و <script> را کامل بنویسید.
    نقل قول: خصیصه language در عنصر script منسوخ شده در HTML5 پس دیگه نیازی به نوشتن اون ندارید.
    داش دمت گرم بابت نکته هات،Heart ولی من اینارو برای HTML 4 نوشتم:

    نقل قول: 1- صفحات را با استفاده از استاندارد HTML4 يا XHTML1 به اندازه توان مرورگر طراحي کنيد.
    __________________________________________________________________________
    وبلاگ: Yousha.Blog.ir

    کسی که دین را با شخصیت ها بشناسد، همان شخصیت ها او را از دین خارج می سازند. امام صادق (ع)

    یادمون نره اون مغز کوچیک هایی که موقع اشغال افغانستان میگفتن حالا که آمریکا اومده چند سال دیگه افغانستان بهشت منطقه میشه...
    15سال گذشت!
    (آخرین ویرایش در این ارسال: ۱۳۹۰ مرداد ۱۲ ۰۶:۱۵ عصر، توسط Y.P.Y.)
    ۱۳۹۰ مرداد ۱۲ ۰۶:۱۳ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 626
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 723
    ( 203 تشکر در 115 ارسال )
    ارسال: #6
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    نقل قول: 6- حتاالمکان با استفاده از CSS طرح بصري ايجاد کنيد نه با تصاوير.
    برای گرد کردن گوشه های یک دایو ، خیلی ها از تصاویر استفاده میکنند ، به این دلیل که مشکل سازگاری با مرورگرهای دیگه رو نداشته باشه . در این مورد هم به نظرتون از css استفاده بشه ؟
    نقل قول: 16- با استفاده از تگ <NoScript> وضعیت غیرفعال/Disable بودن جاوااسکریپت را کنترل کنید.
    میشه در این مورد توضیح بدید . اینکه پنجره های popup من گاهی اجرا نمیشن ، بدلیل کنترل نکردن وضعیت غیر فعال جاوااسکریپت هست ؟
    ممنون میشم این روش رو توضیح بدین.
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    ۱۳۹۱ تير ۲۸ ۰۲:۴۷ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    Y.P.Y آفلاین
    ناظم کل
    *******

    ارسال‌ها: 2,837
    تاریخ عضویت: ۱۳۸۷ دي ۲۸
    اعتبار: 89
    تشکرها : 2098
    ( 4608 تشکر در 2106 ارسال )
    ارسال: #7
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    نقل قول: برای گرد کردن گوشه های یک دایو ، خیلی ها از تصاویر استفاده میکنند ، به این دلیل که مشکل سازگاری با مرورگرهای دیگه رو نداشته باشه . در این مورد هم به نظرتون از css استفاده بشه ؟
    نه منظور من چیز دیگه ای بود.


    نقل قول: میشه در این مورد توضیح بدید . اینکه پنجره های popup من گاهی اجرا نمیشن ، بدلیل کنترل نکردن وضعیت غیر فعال جاوااسکریپت هست ؟
    ممنون میشم این روش رو توضیح بدین.
    یعنی در صورتی که JavaScript مرورگر Disable بود(که خیلی ها می کنن)، کارکرد سایت به هم نخوره

    مثلاً پنجره های popup کامنت به JavaScript نیاز داره، که در صورت Disable بودن JavaScript از کار می اوفته! راه حل سادش قرار دادن لینک کامنت داخل دو تگ: <noscript> comment link </script>
    یا نمایش پیام "داش js مرورگرتو فعال کن" داخل این دو تگ بالا.
    __________________________________________________________________________
    وبلاگ: Yousha.Blog.ir

    کسی که دین را با شخصیت ها بشناسد، همان شخصیت ها او را از دین خارج می سازند. امام صادق (ع)

    یادمون نره اون مغز کوچیک هایی که موقع اشغال افغانستان میگفتن حالا که آمریکا اومده چند سال دیگه افغانستان بهشت منطقه میشه...
    15سال گذشت!
    ۱۳۹۱ تير ۲۸ ۰۳:۰۱ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi
    hamid_80386 آفلاین
    حمید عباسی
    ***

    ارسال‌ها: 1,512
    تاریخ عضویت: ۱۳۹۰ بهمن ۱۶
    اعتبار: 62
    تشکرها : 1213
    ( 1245 تشکر در 745 ارسال )
    ارسال: #8
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    نقل قول: رای گرد کردن گوشه های یک دایو ، خیلی ها از تصاویر استفاده میکنند ، به این دلیل که مشکل سازگاری با مرورگرهای دیگه رو نداشته باشه . در این مورد هم به نظرتون از css استفاده بشه ؟

    خب آخه گوشه تصاویر که اصلآً چیز مهمی نیست، توی مرورگرهای جدید گرد نشون میده، تو مرورگرهای قدیمی هم گرد نشون نمیده، ولی طراحی بهم نمیریزه که...
    __________________________________________________________________________
    هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
    ۱۳۹۱ تير ۲۸ ۰۴:۴۵ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : Y.P.Y pary_daryayi mostafa_sh
    cyletech غایب
    علیرضا اسکندرپور شوفری
    *****

    ارسال‌ها: 2,261
    تاریخ عضویت: ۱۳۸۸ فروردين ۸
    اعتبار: 42
    تشکرها : 1259
    ( 2238 تشکر در 1089 ارسال )
    ارسال: #9
    RE: نکات و اصول مهم در طراحی/ساخت وب.
    نقل قول: برای گرد کردن گوشه های یک دایو ، خیلی ها از تصاویر استفاده میکنند ، به این دلیل که مشکل سازگاری با مرورگرهای دیگه رو نداشته باشه . در این مورد هم به نظرتون از css استفاده بشه ؟
    الآن حتی من به این نتیجه رسیدم که استفاده از canvas خیلی خیلی بصرفه تره تا استفاده ازکتابخانه GD اگر بخوام تصویر بسازم. در حالی که در IE9 به بعد پشتیبانی میشه. بکار گیری پراپرتی های موجود در CSS حتی اگر پشتیبانی درستی ازش نشه باز من توصیه میکنم چون مرورگر هایی که بخوان پیشرفت کنن، قطعا تا پایان تکمیل شدن خصیصه های اون پراپرتی براش پیشوند انجین خودش رو درنظر میگیرن. در حالی که IE چنین نیست. مشکل همه ما هم این لعنتیه.

    نقل قول: میشه در این مورد توضیح بدید . اینکه پنجره های popup من گاهی اجرا نمیشن ، بدلیل کنترل نکردن وضعیت غیر فعال جاوااسکریپت هست ؟
    ممنون میشم این روش رو توضیح بدین.
    دقیقا همون چیزی که یوشا گفت. کاربرای وب فارسی (حرفه ای ها نه) عرضه/دانش غیرفعال کردنشو ندارن. ولی در خارج از ایران این مورد اکثر اوقات دیده میشه که کاربری که داره از وبسایت بازدید میکنه جاوا اسکریپت رو از طریق تنظیمات مرورگرش غیرفعال کرده. در حالی که ما برای انجام کاری نیاز به جاوا اسکریپت داریم. هرچی که بین اون برچسب قرار بگیره، زمانی نمایش داده میشه (بدون استایل) که جاوا اسکریپت فعال نباشه.
    (آخرین ویرایش در این ارسال: ۱۳۹۱ تير ۲۸ ۰۷:۰۷ عصر، توسط cyletech.)
    ۱۳۹۱ تير ۲۸ ۰۷:۰۶ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi
    « قدیمی تر | تازه‌ تر »

    ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS