9 مورد که شما باید در طراحی سایت حتما آنها را کنترل کنید

http://sorooshpardaz.com/images/blog...1394-10-19.jpg

9 مورد که شما باید در طراحی سایت حتما آنها را کنترل کنید

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

• <headers> and <footers>
• <articles> and <sections>
• <aside> and <navigation>
• <figure> and <figcaption>
• <time>,<data>,<progress>,<output>,<meter>,<main>

البته سمانتیک های دیگری هم وجود دارد اما این سمانتیک به گونه مادر تمامی تگها می باشند و برای بهبود ساختار بندی در صفحه وب لازم و ضروری است.

2 .نوع ورودی داده ها
عناصر ورودی در داده های برگفته از وب اپلیکیشن ها ایفا میکنند.نوع ورودی داده ها در دریافت صحیح داده کمک میکند که بیشتر در حالت های فرم کاربرد و اهمیت دارند.در html5 انواع جدیدی اضافه شدند.در حقیقت شما با کنترل کردن نوع داده ورودی میتوانید از ورود داده های غلط که توسط افراد و بعضا ربات ها وارد میشود جلوگیری نمایید.
این مورد، مساله ای است که کمتر توسط طراحان و برنامه نویسان وب کنترل می گردد.تعدادی از این انواع مهم که کمتر توجه قرار میگیرد در زیر قرار داده ایم:

• search
• email
• tel
• url
• number
• range

3.محتوای قابل ویرایش
این خصوصیات به کاربر نهایی این امکان را میدهد که محتویات html را بتواند ویرایش کند.همچنین به برنامه نویسان این امکان را می دهد که صفحات وبی را ایجاد کنند که شامل نوت ها،ویرایشگر html و غیره باشد.تنها کاری که شما باید انجام دهید این میباشد که شما خط زیر را به قطعه کد زیر اضافه کنید.
<p contenteditable="true">Click here to edit this content!</p>
مساله اصلی این میباشد که بیشتر طراحان سایت و برنامه نویسان در هماهنگی این مورد با هم خیلی سرسازگاری ندراند و بعضا پیش آمده است که قطعه کدی که باید قابل ویرایش باشد، توسط برنامه نویس به طور اشتباهی به حالت استاتیک درآمده است.

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

https://developer.mozilla.org/en-US/docs...torage_API

5.ویژگی های مورد نیاز
بعضی از ویژگی ها هستند که داده حتما باید وارد گردد برای مثال زمانی که در فرم تماس، گرفتن اطلاعات اولیه کاربر مانند شماره تماس،ایمیل و پیام ضروی است اما بارها دیده شده است که برنامه نویس یا طراح وب این مساله را فراموش کرده است.برای اینکار حتما باید از قطعه کد زیر استفاده کنید
<input type="text" name="someInput" required>

6.فیلم و صدا
این ابزار،یکی از مهمترین ابزاری است که به html5 اضافه شده است.در حقیقت شما میتوانید فیلم وصدا را بدون نیاز به محاسبات و پیچیدگی هایی که قبلا وجود داشت در طراحی سایت خود و به راحتی قرار دهید.برای اینکار فقط کافی است که قطع کد زیر را اضافه کنید اما بعضا دیده شده است که برنامه نویسان در فرمت ارسالی و آدرس آن اشتباه میکنند.توصیه میشود که حتما از برنامه هایی برای کدنویسی استفاده کنید که به طور خودکار این موارد را اصلاح نماید.
7.webRTC
کنفرانس تلفنی بدون اذیت شدن.webRTC این امکان را به کاربران میدهد که بتوانند از راه دور و بدون نیاز به برنامه و نرم افزار خاصی، ارتباط داشته باشند.

8.عبارت و نمایش های منظم
عبارت و نمایش های منظم یا همان regular expression این امکان را به شما میدهد که بتوانید شرایط خاصی را برای ورودی های قابل قبول از طرف کاربر تعریف کنید.برای مثال اگر میخواهید که باکس ورودی فقط مقادیر عددی را قبول کند شما باید الگویی یا همان pattern با استفاده از عبارت های منظم استفاده کنید.این در واقع همان کنترل نوع داده ورودی میباشد که اکثر برنامه نویسان باز این مورد را فراموش میکنند.
<form action="" method="post">
<label for="Login">Create a Login ID: </label>
<input type="text"
name="login"
id="login"
pattern="[A-Za-z]{6,20}"
autofocus
required>
<button type="submit">Create</button>
</form>

9.گرافیک و افکت های سه بعدی
این درواقع از خصوصیات html5 نمی باشد اما تقریبا میتوانید بگوییم که هم خانواده بقیه خصوصیات میباشد.
WebGL:با استفاده از تعریف API میتوانید گرافیک های سه بعدی را در وب به کار ببرید و به OpenGL ES2.0 اعلام میکنید که میتواند از عناصر <canvas> استفاده کرد.
Canvas:در حقیقت این برای کشیدن اشیا در طراحی سایت استفاده میشود و شما باید برای کشیدن این اشیا از جاوااسکریپت استفاده نمایید.canvas چندین متد و شکل برای کشیدن دارد.
SVG:یک فرمت تصاویر برداری براساس XML که میتوان به طور مستقیم آن را در html قرار داد.
نکته ای که باید رعایت کرد، استفاده صحیح از این کدها میباشد.متاسفانه بعضا مشاهده شده است که کدها توسط برنامه نویس به درستی به کار نمی روند و باعث بهم ریختی کل صفحه وب میگردد.

منبع: sorooshpardaz.com

9 مورد که شما باید در طراحی سایت حتما آنها را کنترل کنید.