سلام مهمان گرامی ، خوش آمدید. آیا این نخستین بازدید شماست ؟ وارد شده یا عضو شوید

انجمن های تخصصی علوم رایانه و هنرهای دیجیتال

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*


مطالب آموزشی در طراحی سایت
زمان کنونی: 23-10-2018، 06:58 PM
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: SaaRaa
آخرین ارسال: karamif969
پاسخ 6
بازدید 2214
محبوب کنید:

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
مطالب آموزشی در طراحی سایت
#1
مخفی کردن عناصر وب با CSS

گاهی مواقع در *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* و کدنویسی HTML و CSS ممکن است بنا به دلایل مختلف نیاز به این داشته باشیم که مواردی را از چشم کاربران عادی پنهان و مخفی کنیم، به طور مثال شرایطی پیش می آید که بخواهیم بین کاربران عادی و ربات ها تفکیک قائل شویم، یعنی به طور مثال یک فیلد را فقط به ربات ها نشان دهیم، در چنین شرایطی برخی ترجیح می دهند از برنامه نویسی سمت سرور مانند PHP یا ASP در این گونه موارد استفاده کنند و برخی نیز به جاوا اسکریپت متوصل می شوند، اما در کنار همه این روش ها که در جای خود کاربرد دارند، شاید یکی از بهترین و کاربردی ترین راه ها، استفاده از قابلیت های CSS باشد که در ادامه آموزش به آنها اشاره می کنیم.

چرا عناصر را در صفحه وب پنهان می کنیم؟

شاید این سوال در ذهنتان باشد که چه نیازی است عناصر را در صفحات وب مخفی و پنهان کنیم؟
البته این کار همیشه هم ضرورت ندارد، بلکه استفاده از این قابلیت در صفحات وب بستگی به شرایط و نیاز شما دارد، به طور مثال فرض کنید یک سیستم ضد ارسال هرزنامه یا اسپم ایجاد کرده اید که متکی بر پر شدن یا نشدن یک فیلد در یک فرم HTML است، به این صورت که اگر فیلد مورد نظر پر شود یعنی کاربر یک ربات است و اگر خالی باشد یعنی کاربر یک انسان است، همان طور که می دانیم ربات ها صفحات وب را معمولا بدون پردازش CSS و به صورت کد HTML دریافت می کنند، لذا آن فیلد مخفی برای آنها قابل رویت است و بنابراین به همراه سایر فیلدهای موجود در فرم، آن را هم به احتمال خیلی زیاد با عباراتی پر می کنند، اما با مخفی کردن فیلد برای کاربران عادی آنها نمی توانند در شرایط معمولی فیلد را مشاهده کنند و لذا نباید اطلاعاتی در آن وارد نمایند، حتی می توان با درج عبارتی مانند "در این فیلد چیزی ننویسید" کاربرانی که استایل CSS در مرورگرشان غیر فعال است را نیز راهنمایی کرد، یا به طور مثال اگر بخواهیم یک ابزار یا یک عبارت، بنا به دلایل مختلف فقط برای ربات ها قابل رویت باشد، نیاز به استفاده از CSS است.
استفاده از display:none

ابتدایی ترین روشی مخفی کردن عناصر در صفحات وب با CSS استفاده از خاصیت display و با مقادیر none است، به این صورت لایه یا بلاک مورد نظر با وجود اینکه در صفحه وجود دارد، ولی از چشم کاربران عادی (در شرایط معمول و با فعال بودن استایل CSS) پنهان است، برای استفاده از این خاصیت کافی است آن را به صورت یک کلاس یا آی دی و یا به صورت استایل خطی به عنصر مورد نظر نسبت دهیم.
<style type="text/css">
.hidden{
display:none;
}
</style>
نکته: بعضا مشاهده می شود که برای مخفی کردن لینک ها یا به اصطلاح فریب دادن ربات های جستجوگر مانند ربات گوگل، از این خاصیت استفاده می شود، به یاد داشته باشیم ربات ها و از جمله ربات گوگل بر اساس الگوریتم های خود این گونه موارد را شناسایی کرده و در صورت تکرار ممکن است سایت یا وبلاگ ما را در لیست سیاه خود قرار داده یا حداقل رتبه آن را کاهش دهند، لذا استفاده از display:none باید با دقت و به تعداد خیلی کم انجام شود.
استفاده از visibility:hidden

یکی دیگر از خاصیت های CSS که در مخفی کردن عناصر در صفحات وب کاربرد دارد، خاصیت visibility:hidden است، البته عملکرد visibility:hidden تا حدود زیادی مشابه display:none است، با این تفاوت که visibility:hidden اگرچه عنصر را در صفحه مخفی می کند، اما بر خلاف display:none اثر آن را به طور کامل از بین نمی برد، به عنوان مثال اگر یک بلاک با ارتفاع 200 پیکسل را با display:none مخفی کنیم، فضای 200 پیکسلی اشغال شده نیز از بین می رود، اما اگر همین کار را با visibility:hidden انجام دهیم، بلاک مخفی می شود، بدون اینکه 200 پیکسل فضای اشغال شده از بین برود.
<style type="text/css">
#visibility{
visibility:hidden;
}
</style>
استفاده از position:absolute و left

تکنیک هایی که در بالا اشاره شد اگرچه روش هایی استاندارد و در جای خود قابل استفاده هستند، اما کاربرد زیاد آنها در یک صفحه به لحاظ سئو (SEO) یا بهینه سازی موتورهای جستجو (Search Engine Optimization) توصیه نمی شود، از این رو طراحان و برنامه نویسان از روش دیگری برای مخفی نمودن عناصر HTML در صفحات وب استفاده می کنند، در این روش ابتدا با استفاده از خاصیت position:absolute عنصر را به حالت شناور در آورده و سپس با کمک left و در نظر گرفتن یک مقدار منفی برای آن، عنصر را از دید کاربران مخفی می کنند بدون اینکه تاثیری در ظاهر صفحه ایجاد شود.
<style type="text/css">
.accessible{
position:absolute;
left:-9999px;
top:auto;
width:5px;
height:5px;
overflow:hidden;
}
</style>
توضیح:
- مقادیر absolute برای خاصیت position باعث شناور شدن بلاک یا عنصر مورد نظر می شود.
- مقدار منفی برای left، عنصر را به بیرون از دید کاربر و خارج از صفحه نمایش هدایت می کند.
- مقادیر width و height می توانند صفر در نظر گرفته شوند، اما برای اطمینان از اینکه ربات هایی مانند ربات گوگل محتوای بلاک را پردازش کنند، بهتر است مقداری بیش از صفر یا 1 برای ارتفاع و عرض در نظر گرفته شود.
- خاصیت overflow با مقادیر hidden باعث می شود که محتوای مازاد بر فضای بلاک، مخفی شود.
نکته: وقتی از مقادیر منفی برای خاصیت left استفاده می کنیم، باید در نظر داشته باشیم که چینش (direction) صفحه در تگ body به صورت پیش فرض یا چپ به راست (ltr) باشد، در غیر این صورت (یعنی اگر تگ body چینش rtl یا راست به چپ داشته باشد) در صفحه اسکرول افقی خواهیم داشت، در این گونه موارد به جای left باید از right و مقادیر منفی برای کلاس مخفی استفاده کنیم یا اینکه چینش را در تگ body به حالت ltr تغییر دهیم و یا اگر ناچار به استفاده از چینش rtl هستیم، آن را به بلاک های زیرمجموعه نسبت دهیم نه به تگ body.
پاسخ
#2
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>
اين ساده ترين صفحه اي است كه ميشه ساخت.
كد بالا را در اديتور خود paste كنيد و با پسوند htm ذخيره كنيد. مثلا hello.htm .
اگر اديتور فعلا نداريد از notepad خود ويندوز استفاده كنيد.
حالا شما يك صفحه ساخته ايد كه مي تواند در اينترنت يك سايت باشد.
پاسخ
#3
استايل (CSS) چيست؟

- CSS مخفف کلمه Cascading Style Sheets ميباشند.
- اولين ورژن استايلها در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود.
- ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بيشتر براي ويرايش صفحات، نحوه نمايشها تگها و ... کاربرد دارد.
- فايل استايلها با فرمت CSS ذخيره ميشوند.

انواع استايلها:

۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد.

HTML:

<tag style="Style Declarations">

Example:
<p style="font-family: Tahoma">This is a paragraph</p>

در مثال بالا با استفاده از حالتهاي مختلف در استايلها نوع فونت آنرا تغيير داديم و همانطوري که در تعريف اين نوع استايل نوشتم اين استايل فقط و فقط تغييرات را بروي همين پاراگراف اعمال خواهد کرد.

۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، اينرا بين دو تگ (<head></head>) به صورت زير نوشته خواهد شد.



HTML:

<style>
<!--
Style Declaration
-->
</style>

Example:
<head>
<style type="text/css">
<!--
p { color: red; text-align: left; font-size: 8pt }
-->
</style>
</head>

اين نوع حالت از تغييرات تعريف شده بروي تمامي تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوينت خواهد بود. توجه داشته باشيد در اين مثال سه حالت مختلف يک استايل را براي تگ پاراگراف تعريف کرديم که با استفاده از (زبون درازی حالتهاي مختلف آن از هم جدا شدند.
اگر بخواهيد اين حالت نوشته شده را براي چند تگ ديگر اعمال کنيد مي توانيد تگها را بااستفاده از کاما (,) از هم جدا کنيد براي مثال:


HTML:


h1, h2, h3, h4 { color: gold; font-family: sans-serif }

۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

HTML:

<link href="url" rel="relation type" type="link type">

Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


در اين نوع از استايلها بعد از اينکه فايل استايل خود را آماده کرديد آنرا با فرمت CSS ذخيره کرده و آنرا همانند بالا فايل استايل را به قالب لينک مي کنيم. براي راحت بود در کار مي توانيد ابتدا استايلها را به صورت Internal استفاده کرده و بعد از اينکه کارتان تمام شد کدهاي نوشته شده بين دو تگ (<style></style>) را در نت پد کپي کرده و آنرا با فرمت CSS دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد.
يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.
پاسخ
#4
از CSS3 و LESS چه می دانید؟

CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
فواید css3 :
در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:
1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
کفپوش اپوکسی| اجرای کفپوش اپوکسی| ملات ضد اسید فوران|
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت
اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.
یک انتقال (Transition) دقیقا چیست؟ :
یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند
محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.

وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.
امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.

LESS چیست؟
LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.
LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور
پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js:
برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">

در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"‎می بایست از rel="stylesheet/less"‎ استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.

قابلیت های کلیدی LESS:
در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.

دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن
متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins
و…!

در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها :

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

/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}

به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آن‌ها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}

Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.

نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.

Wikipedia این طور CSS3 را تعریف می نماید:

"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."

فواید css3 :

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

1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت


اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.


یک انتقال (Transition) دقیقا چیست؟ :

یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند

محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.
وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.


امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.
LESS چیست؟

LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.

LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور

پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js

برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">

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

باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"‎می بایست از rel="stylesheet/less"‎ استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.
قابلیت های کلیدی LESS

در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.
دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن

متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins

و…!

در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها

متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.
/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}

به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آن‌ها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}
Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.
نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
پاسخ
#5
جدیدترین تکنولوژی طراحی سایت چیست؟
آیا تاکنون با این موضوع مواجه شده اید که وقتی با موبایل یا تبلت خود سایتی را مشاهده می کنید با صفحاتی روبرو میشوید که از لحاظ سایز و اندازه برای موبایل یا تبلت شما مناسب نیستند چنین سایتهایی از تکنولوژی رسپانسیو یا واکنشگرا بهره نمی برند ولی با تکنولوژی جدید طراحی سایت ریسپانسیو یا واکنش گرا این مشکلات برطرف میشود.

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

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

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

آیا تکنولوژی جدید ریسپانسیو بودن طراحی سایت در رتبه سایت تاثیر دارد ؟

مسلما این قابلیت باعث می شود سایت شما در هر شرایطی در دسترس باشد و موجب ترافیک بیشتر برای سایت می شود که نتیجه آن ارتقاء رتبه وب سایت شما است . تکنولوژی ریسپانسیو بودن طراحی سایت یعنی قابلیت انعطاف پذیری سایت که هنگام لود صفحات با طول و عرض مختلف سایت با سرعت مناسب و بدون حذف موارد و اطلاعات ضروری صورت گیرد .

از دیگر موضوعاتی که در طراحی سایت و *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* با تکنولوژی های جدید باید رعایت شود استفاده از HTML۵ و CSS۳ در طراحی سایت است . از آنجایی که گوگل هم به استفاده از تکنولوژی های جدید در طراحی سایت تاکید دارد استفاده از تکنولوژی های نوین در طراحی سایت باعث می شود رشد بسیار محسوسی در رتبه تان در موتور جستجوی گوگل را هم شاهد باشید


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

جدیدترین تکنولوژی طراحی سایت شامل طراحی سایت معتبر و استاندارد با جدیدترین تکنولوژی های طراحی سایت و رعایت قوانین گوگل برای بهنیه سازی و سئو سایت و استفاده از جدیدترین تکنولوژی های موجود برای افزایش سرعت در پیاده سازی و تحویل طراحی وب سایت

امروزه طراحی سایت طبق اصول سئو و مناسب برای موتورهای جستجو با گرافیک منحصر بفرد دارای امتیاز است . در نتیجه قالب وب سایت شما کمک زیادی در جذب کاربران می کند در صورتی که قالب مناسب و استانداردی طراحی شود کاربران از مشاهده آن لذت برده و به محبوبیت سایت شما اضافه می شود.

استفاده از تکنولوژی جدید در طراحی سایت دارای اهمیت زیادی است ، به عنوان مثال استفاده از تکنولوژی های ایجکس ، جی کوئری و … است . مطمئنا تمامی شما این را در ذهن دارید که در روزگاران گذشته طراحی سایت فلش از طرفداران بسیار زیادی برخوردار بود که این تکنولوژی با آمدن تکنولوژی های جدید از عرصه رقابت در دنیای طراحی سایت کنار رفت . پس از این به بعد هیچگاه در طراحی سایت خود از فلش استفاده ننمایید و بجای استفاده از این تکنولوژی قدیمی از طراح سایتتان بخواهید که از ایجکس و جی کوئری استفاده نمایند
پاسخ
#6
نکات طراحی سایت در تجربه کاربری
 
12- سرعت سایت:
از دیگر نکات طراحی سایت دقت به موضوع که صفحات سایت سبک باشد و در کمتر از 5 ثانیه برای کاربر نمایش داده شود. اگر بیشتر از این زمان طول بکشد اکثر کاربرها با زدن دکمه برگشت به سراغ سایت بعدی میروند و در حقیقت نرخ پرش سایت شما افزایش یافته است.
 
13 – واکنش گرا:
از دیگر نکات طراحی سایت این است که حتما قالب واکنش گرا باشد.
امروزه اکثر افراد با تلفن همراه و تبلت و حتی تلویزیون های هوشمند وب گردی میکنند پس طراحی سایت شما باید بتواند با هر دستگاهی و هر سایز صفحه نمایش هماهنگ شود.
اگر قالب فعلی سایت این قابلیت را ندارد مقاله آموزش واکنش گرا کردن قالب وردپرس راهنمای خوبی برای شما خواهد بود.
 
14 – منو ها:
از دیگر نکات طراحی سایت منو ها هستند که بازدیدکنندگان با کمک آن ها میتوانند به راحتی به بخش مورد نظر خود هدایت شوند. صفحات مهم سایت را در منوی اصلی سایت در بالای سایت قرار دهید و باقی صفحات را به منو های ثانویه و ستون های کناری سایت منتقل کنید.
 
15 – اسکرول:
طراحی سایت شما باید قابلیت اسکرول به پایین را داشته باشد. اما نباید در موبایل و تبلت نیازی به اسکرول به چپ و راست داشته باشد.
 
16 – روند:
از دیگر نکات طراحی سایت مشخص کردن این موضوع که وقتی کاربری با هدف خرید یک محصول یا مطالعه یک مقاله وارد سایت میشود باید چه مراحلی را طی کند و چه کارهایی انجام دهد. این روند باید کوتاه ولی کامل باشد تا کاربر در کمترین زمان ممکن به خواسته خود برسد.
 
17 – حذف بخشهای اضافی:
در ابتدای طراحی سایت شما بخش های مختلفی برای قالب خود قرار میدهید ولی بعد از قرار گرفتن قالب روی سایت و بررسی رفتار کاربران متوجه میشوید که بعضی بخش ها اصلا استفاده نمیشود و فایده ای برای سایت ندارند پس میتوانید آنها را حذف کنید و سایت خود را سبک تر کنید.
 

18 – دکمه های مهم:
در تمام سایت ها دکمه های وجود دارد مانند: دکمه خرید، ثبت نام در خبرنامه، دانلود محصول و…. از دیگر نکات طراحی سایت این است که این دکمه ها باید با رنگ بندی خاصی مشخص شود تا توجه کاربر جلب شود و همچنین این دکمه ها باید سایز بزرگتری داشته باشد.
 
19 – خوانایی:
از دیگر نکات طراحی سایت انتخاب فونت استاندارد و خوانا برای متن سایت است. فونتی که بر روی تمامی نمایشگرها بصورت خوانا قابل دیدن باشد و مطالعه آن باعث خستگی چشم نشود.
 
20 – شفاف سازی:
باید در سایت از خود اطلاعاتی به کاربر بدهید و خودتان و سابقه فعالیت هایتان را بصورت شفاف معرفی کنید. با رعایت این نکات طراحی سایت اعتماد کاربر بیشتر میشود و بهتر میتواند از خدمات شما استفاده کند.
 
21 – آماده سازی:
کاربران ورودی سایت را مستقیما به صفحات فروش محصول هدایت نکنید. بلرای اجرا نکات طراحی سایت اول اطلاعاتی به او بدهید و ذهنیت او را برای خرید آماده کنید. بعد در مرحله آخر او را به صفحات ویژه فروش هدایت کنید.
 
22 – لینک سالم:
از دیگر نکات طراحی سایت بررسی تمامی لینک ها در سایت است. تا مطمئن شوید که سالم هستند و لینک شکسته در سایت وجود ندارد.
 
23 – متن لینک:
متنی برای لینک خود انتخاب کنید که کاربر قبل از کلیک رو آن متوجه موضوع آن لینک بشود.
نقل قول: بجای اینکه کلمه اینجا کلیک کنید را لینک کنید میتوانید یک کلمه که مرتبط با صفحه مورد نظر است را لینک کنید که کاربر متوجه شود به چه صفحه ای هدایت خواهد شد.
 
24 – لینک خارجی:
تمامی لینکهای که از سایت شما به سایتهای دیگر داده میشود باید در پنجره جدید باز شود. این کار در کاهش نرخ پرش بسیار موثر است و یکی دیگر از نکات طراحی سایت است.
 
25 – فرم ها:
اگر در طراحی سایت خود فرم ثبت نام و خرید و…. دارید سعی کنید تا حد ممکن آنها را مختصر کنید و سوال های اضافی از کاربر نپرسید. همچنین اگر میتوانید کدهای Captcha  را از فرم های خود حذف کنید.
 
26- پر شدن خودکار:
یکی دیگر از نکات طراحی سایت فرم های سایت شماست که باید قابلیت به صورت خودکار پرشدن توسط مرورگر کاربر را داشته باشند.
 
27 – دادن تاییدیه:
وقتی یک کاربر در سایت شما فرمی را پر میکند باید در انتها پیغام مناسبی به او نمایش داده شود که کاربر بفهمد فرم با موفقیت ارسال شده یا خیر که متاسفانه بسیاری از طراحان این نکات*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* را فراموش میکنند.
 
28 – اطلاعات تماس:
برای اعتماد سازی هرچه بیشتر سعی کنید در کنار تمامی فرم های سایت خود اطلاعات تماس را هم منتشر کنید که اگر به هر دلیلی کاربر نتوانست از طریق آن فرمها به خواسته خود برسد، بتواند به صورت مستقیم با شما در ارتباط باشد.
 
 
 
 
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  طراحی سایت فروش ملک sitecode 0 94 07-08-2018، 10:49 PM
آخرین ارسال: sitecode
Heart آموزش ساخت و قراردان فاوآیکون favicon در سایت و معرفی سه سایت برای ساخت فاوآیکن Mohsen Omidvar 3 3,109 12-06-2018، 12:11 AM
آخرین ارسال: Mohsen Omidvar
  طراحی سایت sitecode 0 227 29-05-2018، 02:17 AM
آخرین ارسال: sitecode
Heart تبدیل وبلاگ به وب سایت Mohsen Omidvar 0 913 22-02-2017، 04:14 PM
آخرین ارسال: Mohsen Omidvar
  اولین قدم برای طراحی وبسایت Farzad 1 2,418 19-02-2017، 02:19 PM
آخرین ارسال: SaaRaa
  مناسب ترین فونت در طراحی وب سایت چیست ؟ sitecode 1 1,262 12-12-2016، 02:26 PM
آخرین ارسال: SaaRaa
  قانون گشتالت در طراحی سایت asgharji 0 1,084 04-09-2016، 03:50 PM
آخرین ارسال: asgharji

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان