مدیر سایت
طراحی سایت شرکت کاج نماد
طراحی سایت خیریه رادمهر
پلاگین فارسی کامپوننت شبکه اجتماعی جوملا Community Builder comprofiler cb
نحوه تغییر سایز دسته ای تصاویر توسط photoshop
با استفاده از Photoshop به آسانی می توانید تمامی تصاویر موجود در یک فلدر را به سایز دلخواه خود تغییر دهید. برای انجام این کار کافی است نرم افزار photoshop را باز نموده و مراحل زیر را انجام دهید.
مرحله 1
منوی File > Scripts > Image Processor را باز نمایید. با کلیک بر رویاین بخش یک صفحه چهار بخشی برای شما باز می شود.
مرحله 2
در بخش اول این پنجره فلدر فلدری که قصد تغییر سایز آن را دارید توسط Select Folder انتخاب نمایید. در صورتی که قصد دارید تصاویر موجود فلدرهای زیر مجموعه فلدر اصلی را نیز تغییر سایز دهید تیک Include all Subfolders را نیز بزنید.
مرحله 3
در بخش بعدی فلدری را که قصد دارید در آن تصاویر تغییر سایز داده شده را ذخیره نمایید انتخاب نمایید.
مرحله 4
در این مرحله تیک Save as JPEG را بزنید و سپس Resize to fit را انتخاب نموده و حداکثر سایز دلخواه خود را برای عرض W و برای ارتفاع H وارد نمایید. دقت نمایید تناسب تصویر به هم نمی خورد و تصویر در همان تناسب قبلی کوچکتر می شود.
مرحله 5
پس از تکمیل مراحل قبلی بر روی کلید Run کلیک نموده و منتظر اتمام عملیات تغییر سایز تصاویر بمانید. پس از اتمام کافی است به فلدری که برای ذخیره تصاویر انتخاب نموده اید مراجعه نمایید و تصاویر تغیبر سایز شده خود را دریافت نمایید.
10 منبع برای آنکه در زمینه طراحی وب فعال تر باشید
طراحان و برنامه نویسان همیشه در تلاشی برای رفع مشکلات فنی خود در زمینه طراحی وب سایت هستند. فعالیت های آنلاین امروز روز به روز در حال گسترش و افزایش است. شبکه های اجتماعی، فروم ها برای متخصصان در هر زمینه ای بسیار مهم شده اند که این مورد برای طراحان و برنامه نویسان وب بسیار مهم تر می باشد. اکنون عضویت در این بخش ها بسیار مهم تر از قبل می باشد. در صورتی که من طراح و یا برنامه نویس وب باشم و می خواهم در جوامع شغلی خود فعال تر باشم از کجا می بایست شروع نمایم؟
3 مورد از فروم ها برای طراحان و برنامه نویسان وب
رویت یک فروم و عضویت و شرکت در آن روش بسیار مناسبی برای اطلاع یافتن از ایده های سایرین و به اشتراک گذاری اطلاعات شخصی می باشد. شما می توانید با اشخاصی ارتباط برقرار نمایید که مواردی می دانند که شما نمی دانید. فروم ها و تالارهای گفتمان توسط افرادی مدیریت می شوند بنابراین می توانید از صحت مطالب آن تا حدی مطمئن باشید.
در بخش زیر 3 مورد از بهترین فروم ها را برای طراح و برنامه نویسی وب سایت معرفی می نمایم:
- Forrst. این فروم یک انجمن سنتی و قدیمی نمی باشد, در این انجمن کاربران متخصص بسیاری عضو هستند. تمرکز اصلی برای روی طراحی (که به دسته بندی های مختلفی تقسیم شده) و مرور کد است, و بحث در مورد موضوعات روز می باشد.
- Stack Overflow. این فروم بسیار جالب می باشد زیرا به خوانندگان این امکان را می دهد در بحث شرکت نمایند بدون آنکه نیاز باشد به سوالی پاسخ دهند و یا سوالی را مطرح نمایید. کاربران می توانند به بهترین پاسخ ارائه شده رتبه دهند, پس بنابراین زمانی که شما در حال رویت پاسخ های سوالات می باشید بهترین پاسخ به عنوان اولین نتیجه نمایش داده می شود. هر کس می تواند سوال بپرسد, هر کس هم می تواند پاسخ دهد, و هر کسی می تواند رای دهد. نیاز به عضویت در سایت نیست, که این قابلیت در انجمن های معمولی موجود نیست.
- Web Developer. یکی از معروفترین انجمن ها (که در موتورهای جستجو به عنوان اولین نتایج می باشد) و دارای اطلاعات بسیاری می باشد. قبل از ارسال می بایست در سایت ثبت نام نمایید, و می توانید مطمئن باشید سوالات و پاسخ های شما در این فروم بسیار دیده می شود.
3 شخصیت برتر توسعه دهنده وب در شبکه های اجتماعی و چرا می بایست آن ها را دنبال نماییم
در صورتی که به استفاده از شبکه های اجتماعی علاقه ای ندارید این مورد را از دست خواهید داد ولی با دنبال کردن این متخصصان و توسعه دهندگان وب در محیط توئیتر از آنان مطالب جدیدی خواهید آموخت. برخی از این متخصصان در زیر آمده.
- John Resig. John Resig خالق jquery می باشد, یک برنامه نویسی جاوا اسکریپت, و مولف, و او این تکنولوژی ها را کامل می شناسد. توئیتر او مکان بسیار مناسبی برای دنبال کردن می باشد زیرا مطالب مفیدی را توئیت می نماید. موردی که بسیار جالب می باشد آن است که سوال و جواب هایی رو در شبکه اجتماعی مطرح می نماید تا سایر کاربران بتوانند در بحث شرکت کنند.
- Gina Trapani. با وجود اینکه این متخصص در حدود 300000 دنبال کننده در توئیتر دارد, مطالب بسیاری را دائما در شبکه های اجتماعی ارسال می نماید. ایشان شخص بسیار تاثیر گذاری در این صنعت می باشند.
- Eric A. Meyer. من ایشان را دوست دارم زیرا به کلیه سوالات مطرح شده در زمینه html و css پاسخ می دهد و در بحث ها شرکت می نماید. ممکن است که یکی از تاثیر گذارترین افراد نباشد , اما این شخص تسلط بسیاری به این شغل دارد. و این شخص اطلاعات علمی بسیاری دارد, با 22000 توئیت انجام شده می توانیم اعلام نماییم یکی از فعال ترین متخصصان است.
3 مورد از بهترین بلاگ های طراحی و توسعه وب سایت
در زیر به شما 3 مورد از بهترین بلاگ های طراحی و برنامه نویسی وب سایت را معرفی می نمایید که در این سایت ها می توانید مطالب بسیار مفیدی و آخرین تکنیک های روز دنیا را مطالعه نمایید:
- Smashing Magazine. یکی از محبوب ترین های من و همچنین پر بازدید ترین بلاگ های آموزشی. این بلاگ به صورتی طراحی شده که طراحان و برنامه نویسان به راحتی می توانند مطالب مورد نظر خود را مطالعه نمایند.
- Scott Hanselman. این بلاگ دارای مطالب بسیار مفیدی می باشد. این شخص تجربیات واقعی خود را در زمینه طراحی و برنامه نویسی وب سایت با شما اشتراک می گذارد.
- OXP (One Xtra Pixel). این بلاگ مطالب خود را با کمی طنز ارائه می نماید. و موضوعات آن از موارد پایه تا موارد فنی تر می باشد, اما همیشه در مطالب خود از گرافیک های طنز استفاده می نماید.
بلاگ خبری توسعه دهندگان وب
در این بلاگ ها می توانید مطالب مفید سایر کاربران را مطالعه نمایید و در صورتی که مطلب و مقاله مفید قابل ارائه داشتید آن را ارسال نمایید. در زیر یک مورد را برای شما لیست نموده ام:
- CSS Drive. این سایت به مانند یک سایت خبری طراحی شده, بنابراین مطالب بسیاری را در مرحله اول مشاهده می نمایید. این سایت ساختار بسیار مناسبی دارد و بنابراین به راحتی می توانید موضوعات مورد نظر خود را بیابید و مطالعه نمایید.
قرار دادن Audio و Video در وب سایت توسط html
ایجاد Video و Audio در سایت توسط کدهای html5 که طراحان وب سایت به راحتی میتوانند در سایت ایجاد نمایند,
فقط کافیست دستورالعمل های زیر را انجام دهید تا در سایت مثال عکس بالا ویدئو و یا صفحه پخش موزیک داشته باشیم :
کد html برای اجرا Video در سایت :
<video width="700" height="420" controls>
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
کد html برای اجرا Audio در سایت :
<audio controls>
<source src="music/amin.ogg" type="audio/ogg">
<source src="music/amin.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
نکته : آدرس ویدئو و موزیکی که در آنجا قرار داده اید با آدرسی که درکد html میباشد صحیح باشد .
طراحی سایت داناتل
طراحی سایت بونکر سازی قاضی
کد Css جهت انیمیشن کردن باکس
در سایت های امروزه برخی از کارهای انیمیشن در سایت رو میشه با کدهای Html5 و Css3 نوشت که برای مثال عکس بالا توسط css دور باکس ها به صورت انیمیشن درست شده و ترتیب درست کردن آنرا توضیح میدهیم,
برای اینکه در سایت بتونیم باکس های Shadow درست کنیم, که وقتی Hover میکنیم روی باکس, و دور باکس به صورت انیمیشن و سایه های رنگی به وجود بیاریم از کدهای زیر استفاده نمایید :
کد Css :
*{
padding:0;
margin:0;}
#master {
/* [disabled]background-color: #F00; */
height: 895px;
width: 980px;
position: relative;
margin: 0 auto;
}
#apDiv1 {
position: absolute;
left: -51px;
top: -1px;
width: 981px;
height: 131px;
z-index: 1;
}
#apDiv2 {
position: absolute;
left: 296px;
top: 68px;
width: 612px;
height: 42px;
z-index: 2;
}
#apDiv2 ul li {
list-style-type: none;
float: left;
display: block;
/* [disabled]background-color: #666; */
height: 42px;
width: 102px;
text-align: center;
line-height: 42px;
font-family: verdana;
font-size: 12px;
}
.menu1 {
background-color: #C61211;
}
.menu2 {
background-color: #FC6B00;
}
.menu3 {
background-color: #9BCA00;
}
.menu4 {
background-color: #0BAAD4;
}
.menu5 {
background-color: #CB3187;
}
.menu6 {
background-color: #F79D00;
}
#master #apDiv2 ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
#apDiv3 {
position: absolute;
left: 491px;
top: 18px;
width: 300px;
height: 26px;
z-index: 3;
background-color: #1B1C1E;
transition: all 0.5s;
}
.search:hover{box-shadow:0px 0px 30px #FFFFFF; }
.search{ width: 300px;
height: 24px; background-color: #1B1C1E; border:0px; color:#FFF;}
#apDiv4 {
position: absolute;
left: 809px;
top: 17px;
width: 101px;
height: 25px;
z-index: 4;
font-family: verdana;
font-size: 12px;
line-height: 25px;
font-weight: bold;
color: #FFF;
background-color: #1B1C1E;
text-align: center;
cursor:pointer;
transition: all 0.5s;
}
#apDiv4:hover{
box-shadow:0px 0px 30px #FFFFFF;}
body {
background-color: #000;
}
کد html :
<div id="master">
<div id="apDiv1"></div>
<div id="apDiv2">
<ul>
<li class="menu1">Item1</li>
<li class="menu2">Item2
<ul>
<li class="menu1">Sub Item 1</li>
<li class="menu2">Sub Item 2</li>
<li class="menu3">Sub Item 3</li>
</ul>
</li>
<li class="menu3">Item3</li>
<li class="menu4">Item4</li>
<li class="menu5">Item5</li>
<li class="menu6">Item6</li>
</ul>
</div>
<div id="apDiv3"><input class="search" value="search..." type="text" /></div>
<div id="apDiv4">Search</div>
</div>
طراحی بهترین فرم برای وب سایت
در اغلب موارد یک فرم بخش فعال وب سایت می باشد. تمام کاری که در زمینه ارائه محصولات و خدمات خود می نمایید به یک فرم ختم می شود. به هم دلیل طراحی سایت دارکوب به طراحی فرم های خود اهمیت بسیاری قائل می شود. فرم ها را می بایست از اسپم ها و هکرها امن ساخت. ظاهر فرم می بایست مرتب و کاربر پسند باشد و همه چیز در جای خود قرار گیرد. با بررسی دقیق فرم بهترین فرمی که تا کنون طراحی کرده ایم را ایجاد می نماییم.
کار خیلی سنگینی نیست. کافی است فرم خود را بسیار ساده و مرتب طراحی نمایید و این کار باعث افزایش پر کنندگان فرم می شود. فقط کافی است این 15 قانون را در طراحی فرم انجام دهید.
15 قانون در طراحی فرم وب سایت
1. بهتر است فیلدهای کمتری داشته باشید
هیچ کس پر کردن فرم را دوست ندارد، اما آیا میدانستید هر فیلد میزان اثر بخشی فرم را 17% پایین می آورد. مطالعات بسیاری در این زمینه انجام شده که چند مورد آن در بخش زیر آمده:
- یک فرم تماس با ما 11 فیلدی با فرم تماس با ما 4 فیلدی جایگزین شد و کاربران 160% از فرم تماس با ما 4 فیلدی بیشتر استقبال نمودند
- یک فرم 5 فیلدی 34% بیشتر از فرم 9 فیلدی توسط کاربران تکمیل شده
- در تحقیقی بر روی 40000 وب سایت یک فرم 3 فیلدی 17% بیشتر از یک فرم 4 فیلدی تکمیل شده. این که تعداد فیلدها از انواع مختلف (متن، جعبه متن، لیست، رادیو، چک باکس و ...) تاثیر بسیاری بر روی میزان تکمیل کردن آن خواهد داشت.
2. فیلدهای اجباری را محدود نمایید
فقط فیلدهایی که واقعا به آن احتیاج دارید را اجباری نمایید. در یک تحقیق بررسی شده که فیلد فرم تلفن اجباری 275% بر میزان اثر بخشی و تکمیل فرم تاثیر گذاشته. همیشه فیلدهای اجباری را توسط علامت هایی مشخص معین نمایید.
3. فرم را به صورت تک ستونی طراحی نمایید
فرم های تک ستونی سریعتر تکمیل می گردند و برای کاربر حس بهتری خواهد داشت. معمولا فیلدها در ستون دوم فراموش می شوند.
4. عناوین را بالای فیلدها قرار دهید
قرار دادن عنوان فیلدها در بالای آن در صورتی که قصد دارید کاربران فرم را سریعتر تکمیل نمایند ایده بسیار جالبی می باشد. چشم انسان قابلیت جا به جا شدن از بالا به پایین را در 50 میلی ثانیه انجام می دهد ولی به صورت افقی را در مدت 250 میلی ثانیه انجام می دهد. البته قرار دادن عناوین داخل فیلد نیز مورد مناسبی می باشد.
5. عناوین فیلدها می بایست به درستی کار شوند
سعی نمایید برای فیلدهای خود عناوین درستی انتخای نمایید و تا جایی که می توانید این عناوین را کوتاه در نظر بگیرید.
6. فرم را اعتبار سنجی سمت کاربر نمایید
اعتبار سنجی فرم را پس از ارسال فرم کاربر انجام ندهید و از JavaScript/HTML5 برای نمایش خطای کاربران در کنار فیلد استفاده نمایید. دقت نمایید تا فیلد مورد نظر مشخص باشد و پیغام خطای آن نیز در کنار آن نمایش داده شود. همچنین فقط مواردی که به آن واقعا احتیاج دارید را اعتبار سنجی نمایید. اعتبار سنجی بسیار هم ممکن است از تکمیل فرم کاربران بکاهد.
7. ورودی های فرم را محدود نمایید
در صورتی که قصد دارید کاربر فیلدی را در فرمت خاصی مثلا xxx-xxx-xxxx تکمیل نماید می بایست کاربر را مجبور به این کار نمایید. مثلا به جای ایجاد تک باکس برای فیلد تاریخ بهتر است به کاربر تقویم نمایش داده شود تا کاربر تاریخ را انتخاب نماید.
8. ورودی های پیش فرض در فرم قرار دهید
برای کاربران ورودی پیش فرض نمایش دهید تا کاربر سریعا متوجه شود چه نوع ورودی می بایست وارد نمایید. انجام این کار مخصوصا برای کاربران موبایل بسیار مناسب است زیر آنها در صفحه کوچک خود راحتر متوجه فیلدی که می بایست وارد نمایند می گردند.
9. نوع ورودی مناسب برای فرم قرار دهید
همه فیلدهای خود را از نوع متنی قرار ندهید بلکه از نوع فیلدها ماه، شماره، ایمیل و سایر موارد استفاده نمایید.
10. بخش نحوه تکمیل فرم قرار دهید
در کنار فرم آیکونی جهت نحوه تکمیل فیلد مورد نظر قرار دهید و این آیکون را به صورت موس اور به کاربر نمایش دهید.
11. از کپچا CAPTCHA استفاده ننمایید
در صورتی که از CAPTCHA استفاده نمایید میزان تکیل فرم توسط کاربران پایین خواهد آمد. در صورتی که از این مورد استفاده نمایید در حدود 3%–14% اثر بخشی فرم خود را از دست خواهید داد. جهت جلوگیری از اسپم ها از روش های دیگری که کاربر پسند تر هستند نظیر honeypot استفاده نمایید.
12. کلیدهای فرم خود را نام گذاری نمایید
برای فرم خود عنوان و توضیحات در نظر بگیرید تا کاربران بهتر و با اطلاعات بیشتری فرم را تکمیل نمایند. کلیدهای فرم خود را بهتر نام گذاری نمایید مثلا به جای کلید "ارسال" از کلید "تکمیل ثبت نام" استفاده نمایید.انجام این کار به کاربر این اطلاع را می دهد که در حال انجام چه کاری است.
13. کلیدهای فرم خود را در معرض قرار دهید
کلید پیش فرض فرم می بایست از سایر موارد فرم بیشتر نمایان باشد. این مورد در صورتی که فرم شما چندین کلید داشته باشد بسیار مهم است.
14. با کاربران خود در ارتباط باشد
زمانی که کاربر فرم را ارسال نمود پیغام مناسبی به کاربر نمایش دهید تا کاربر بداند پس از تکمیل فرم چه اتفاق می افتد و یا چه کارهایی می بایست انجام دهد.
15. مقایسه فرم های بلند و فرم های چند مرحله ای
در تحقیقی که بر روی یک فرم که به صورت تک صفحه ای طراحی شده بود با فرمی که به صورت چند صفحه ای و مرحله ای ایجاد شده بود فرمی که تک صفحه ای ایجاد شده بود بیشتر مورد استقبال کاربران قرار گرفت. فرمی که به صورت تک مرحله ای طراحی شده بود در حدود 22% بیشتر از فرم دیگر تکمیل شده بود. اما در صورتی که مجبور به ایجاد فرم چند صفحه ای بودید بهتر است در فرم بخشی را جهت آنکه کاربر بداند در چه مرحله ای از تکمیل فرم است تعبیه نمایید.
