چگونگی طراحی وب سایت های کاربر پسند
مهر ۱۳۸۶ - CSS - محمدعرفان شمسییکی از موضوعات جذاب برای خیلی ها از جمله من، طراحی کردن وب سایت است. من که به شخص علاقه دارم در آینده نیز، در این قسمت مشغول به کار شوم. هر چند اطلاعات حال حاضر بنده در این مقوله، در حد صفر و یا زیر صفر است، اما با این حال همیشه سعی کرده ام مطالعات زیادی در این زمینه داشته باشم . در این پست با هم به این موضوع می پردازیم که چگونه می توانیم یک وب سایت تاثیر گذار داشته باشیم.
ذکر این نکته مهم است که این پست، هیچ گونه نکته ی فنی در خود ندارد و در واقع روش هایی را ارائه می دهد تا طراحان عزیز، بتوانند به کمک این روش ها و البته دانش فنی خود، وب سایت هایی جذاب، طراحی کنند. خوشبختانه و یا بدبختانه، من هیچ گاه صرفا برای بازدیدکننده هایم مطلب ننوشته ام. در واقع اولین خواننده ی مطالب این وبلاگ خود بنده هستم ! به همین دلیلم هست که همیشه سعی می کنم بسیار ساده توضیح دهم که خودم بتوانم بفهمم! این موضوع را از این جهت ذکر کردم که هیچ وقت نگران پیچیده بودن مطالب در این وبلاگ نباشید. سادگی اساس کار این وبلاگ است.
شما برای تاثیر گذاشتن بر روی بیننده، فرصت بسیاری کمی دارید. عده ای این زمان را 20 ثانیه، عده ای دیگر 10 ثانیه و حتی اخیرا اثبات شده است که برای تاثیر گذاشتن بر روی بازدیدکننده ی خود، تنها 50 میلی ثانیه فرصت دارید! البته ما با این زمان ها کار نداریم. همین قدر کافیست که بدانیم این مدت بسیار کم است و شما باید تمام سعی خود را انجم دهید تا در این مدت کم، بازدیدکننده را به کاربر و یا مشتری خود تبدیل کنید. بعد از رفتن به یک سایت جدید، برای بسیاری از ما ها، مهم نیست چه تعداد صفحه و با چه محتوایی در مقابل خود داریم. مهم این است که در نگاه اول سایت جذبمان کند.(دقت کنید هدف سایت های بزرگی مانند ویکی پدیا نیستند)
باید فهمیده باشید که بین رضایت بازدیدکننده ها و ویژگی های ظاهری یک سایت، رابطه ی مسقیمی وجود دارد. حال این سوال پیش میاید که برای مقابله با این موضوع هراس آور چه کنیم؟ برای جواب دادن به این سوال باید چندین مورد ذکر شود.
از مهمترین عناصر مورد توجه برای کاربران، نحوه ی طراحی، شکل ظاهری، رنگ های مورد استفاده و همچنین محتوای سایت است. به این موضوع دقت کنید که اولین چیزی که کاربران بعد از ورود به سایت ما خواهند دید، محتوای آن نخواهد بود. آنها به سرعت و با چشم ها ی خود، کل صفحه را مورد ارزیابی قرار می دهند و به دنبال ایده های مورد نظر خودشان می گردند. بنابراین سایت شما در وهله ی اول باید گویا و عاری از هر گونه مطلب اضافی باشد. هماهنگی سایت شما با تمامی مرورگرها، موضوعی است که بار ها خود من به آن اشاره کردم. اما باز هم باید تکرار کرد. مطمئن باشید شخصی حاضر نمی شود فایرفاکس و یا اپرا را ترک کند، تنها به این دلیل که وب سایت شما با آنها هماهنگ نیست! پس به این موضوع نیز دقت ویژه کنید تا بتوانید تاثیر اولیه خوبی روی بیننده داشته باشید.
استفاده از عکس در پس زمینه ی سایت، همیشه عامل بدی نیست. بلکه اگر ماهرانه این عکس انتخاب شود، در کنار یک رنگ بندی مناسب، می تواند تاثیر فوق العاده یی روی بیننده داشته باشد. به موضوع رنگ بندی، انتخاب فونت و نوع نگارش دقت کنید دوستان! یک مثال ساده در این زمینه کافیست تا شما به اهمیت این موارد پی ببرید. تصور کنید وارد یک وب سایتی می شوید که در زمینه ی آرامش و راه های ایجاد آن فعالیت می کند. حال بعد از لود شدن کامل، با یک صفحه با پس زمینه یی به رنگ نارنجی و یا صورتی روشن و همچنین متونی که سایز آنها 72 است روبه رو می شوید! بنده اولین کاری که می کنم این است که سایت را بسته، و چند عدد فحش نثار طراح محترم و همچنین صاحبان سایت می کنم که این موضوعات را نمیفهمند! پس بدانید که رنگ بندی مناسب، می تواند تاثیر فوق العاده یی داشته باشد.
باید دقت کنید علاوه بر صفحه ی اصلی، سایر صفحات هم از طراحی کار آمدی برخوردار باشند. چون بسیاری از بازدیدکننده ها، مستقیما به آن صفحات هدایت می شوند و اگر امکانات رفاهی مناسبی را برای آنها در نظر نگیرید، ممکن است از سایت شما خارج شوند! پیوند دادن به صفحه ی اصلی، در تمام صفحات فرعی، موضوع مهمی است. به این موضوع باید دقت کنید که طراحی سایت باید به گونه ی باشد که کاربر بعد از ورود به یک صفحه، حس نکند به انتهای سایت و یا به یک بن بست رسیده است که تنها راه خروج از آن، بستن سایت می باشد! پیوند های مناسب، می تواند عاملی باشد تا بازدیدکننده خود را حفظ کنید.
موضوع مهم این است که آیا محتوا در این بین نقشی ندارند؟ جواب مسلما خیر است. اما باید دقت کنید هدف ما چیست. ما قصد داریم ابتدا بازدیدکننده ای را که برای اولین بار به وب سایت ما آمده است، جذب و برای خود حفظش کنیم، و بعد در وهله ی دوم مطالب مفیدی در مورد مقوله ی تخصصی خود به آن ارائه دهیم. یک پیشنهاد مناسب این است که شما صفحه ی اول خود را همان طور که گفتم، شلوغ نکنید. سعی کنید یک دید کلی از سایتتان به کاربر دهید و سپس سعی کنید آن را به سمت صفحات دیگر راهنمایی کنید.
در نهایت شما باید بینندگان سایت خود را بشناسید و نگرش آنها را به زیبایی درک کنید. و یا سایت خود را طوری طراحی کنید تا با ارائه ی یک ایده ی خاص، بتواند یک نشان برای بیننده ایجاد کند تا باز هم سراغ سایت شما بیاید. می توانید مطمئن باشید، بعد از انجام این کارها، سایت مورد نظر، مورد توجه همگان قرار خواهد گرفت.
دوستان سلام؛
بنده واقعا شرمنده هستم که مدتیست وقت به روز کردن سایت را ندارم. الانم عازم سفر دور و درازی برای ثبت نام در دانشگاه هستم. هنگامی که تمام وقت آدم پشت کامپیوتر می گذرد، نباید انتظار قبولی در جای خوب را هم داشته باشد! فقط خدا را هزار مرتبه شکر که در رشته ی مورد علاقم یعنی فناوری اطلاعات قبول شدم که همین جای شکرش را باقی می گذارد که بتوانم پر انرژی به فعالیت هایم ادامه دهم.
هدف از این پست اطلاع شما دوستان از وضعیت بنده و علت کمتر به روز شدن سایت بود.سعی می کنم در تمام فرصت های ایجاد شده، برای به روز کردن اینجا البته با مطالبی با کیفیت بالا استفاده کنم.
به امید موفقیت همگی.
اینترنتی خوب!
شهریور ۱۳۸۶ - Site - محمدعرفان شمسیخیلی ها اعتقاد دارند، درست است که اینترنت ممکن است بعضی اوقات مفید واقع شود، اما در نهایت چیز خوبی نیست.(نفس آن بد است) البته منظور از خیلی ها، عوام مردم هستند نه دوستاداران آی تی. اما خب حرف من چیز دیگری است. چیزی که ممکن است خیلی ها بگویند حرف معلم هاست، همان طور که قبلا هم به بنده همین را گفتند. اما من به حرفم اعتقاد دارم. اعتقاد دارم سود و ضرر در اینترنت، بستگی به نوع استفاده ی ما از اینترنت دارد. ممکن است در خیلی از موارد دیگر هم، این حرف صدق کند، اما نمود آن در اینترنت به نظر من بیشتر است. شما هر کاری که بخواهید می توانید در اینترنت انجام دهید. این دیگر به خدا شما مربوط است که آن کار خوب باشد و یا بد.
مطالب بالا مقدمه ای بود، بر معرفی 3 سایت خوب و مفید که شاید باعث شود در این بینابین، یک کار خیر هم انجام دهیم. سایت هایی که اگر تعدادشان و کیفیتشان بیشتر شود، شاید اعتقاد عوام را نسبت به اینترنت عوض کنند.
جمکران:
این سایت متعلق به مسجد مقدس جمکران است. سایت بسیار مفیدی که هم امکانات جالبی در اختیار کاربران قرار می دهد و هم برای کسانی که قصد زیارت جمکران را دارند، می تواند مفید واقع شود. یکی از امکانات جالب این سایت، این است که شما می توانید دردل های خود را با امام زمان(عج) ضبط کنید و برای سایت بفرستید تا در سایت قرار بگیرد. همچنین شما می توانید در این سایت عضو شوید تا حتی شانس سفر به جمکران را نیز پیدا کنید. البته تایید گرفتن برای عضویت در این سایت ممکن است چند روز طول بکشد. به امید اینکه همه ی ما از یاران واقعی امام زمان(عج) باشیم.
ایران اهدا:
سایتی که به همت دانشگاه شهید بهشتی راه افتاده است و هدف آن، جمع آوری اعضا برای افرادی که نیازمند هستند، می باشد. واقعا جای خوشبختی دارد که همچین سایتی راه افتاده است تا قریب به 74 هزار نفر در آن عضو شوند. 74 هزار نفری که اگر این سایت نبود، شاید هر گز دست به چنین کاری نمیزدند. خود بنده اسفند 84 در این سایت عضو شدم. توصیه می کنم اگر واقعا به این کار اعتقاد دارید، در آن عضو شوید تا کارتش برایتان ارسال شود. همچنین خواندن بخش دفتر یادبود هم خالی از لطف نخواهد بود.
بچه های قلم:
سایتی که بیشتر از چیزی که فکرش را بکنید، شما را مجبور به گشت و گذار در بین صفحاتش می کند! با بخش های متوعی مانند، نوا، نما، لینک و … که دارد، تبدیل به یک سایت کامل شده است. به امید اینکه هر روز بیشتر شاهد چنین سایت های خوب و مفیدی باشیم. در بخش نوا، دسته بندی خوبی صورت گرفته است و شما می توانید هر چه که دلتان می خواهد دانلود کنید.
امیدوارم این سایت ها به دردتان بخورد. اگر شما هم سایت هایی در این زمینه ها می شناسید که می توانند باعث انجام دادن کار خیری شوند، حتما معرفی کنید. بدون شک همه ی آنها را معرفی خواهم کرد.
پ ن: سومین جلسه ی همبستگی وبلاگ نویسان آی تی این هفته برگزار می شود. برای اطلاع از جزییات، به این سایت مراجعه کنید.
استاندارد سازی، گامی رو به جلو
شهریور ۱۳۸۶ - Site - محمدعرفان شمسیبنده در چند پست قبل، در مورد ایمن کردن وبلاگ های وردرپرس مطلبی نگاشته بودم که متاسفانه تعدادی از دوستان توجهی نکردند و بنده متاسفم که میبینم همچنان سایت دوستانم، چنین مشکلی دارد و به راحتی سایتشان را در معرض خطر قرار می دهند. البته کار بنده چیزی به غیر از اطلاع رسانی نبوده و نخواهد بود. دیگر خود دوستان می دانند و و وب سایتشان!
در این پست، قصد دارم به مبحث مهمی بپردازم که فکر نکنم کمتر از فارسی سازی سیستم های مدیریت محتوا داشته باشد که انقدر هم جدیدا وقت صرفش می شود. استاندارد سازی مبحثی است که باز هم به لطف دوست عزیزم، به صورت جدی باهاش آشنا شدم و متاسفانه وبلاگ و سایت ایرانی کمی را مشاهده کردم که از این استاندارد پیروی کرده باشند. امید دارم تا این مقاله مورد توجه و عنایت دوستان قرار بگیرد.
استاندارد سازی وب سایت چیست؟
معتبر سازی و یا استاندارد سازی، پروسه ای است که به بررسی صفحات وب می پردازد و توسط W3C برای HTML و XML و WapForum برای WML تعریف شده است. هدف از انجام این کار، بر طرف کردن مشکلات و غلط های صرفی و نحوی! موجود در طراحی سایت است. البته این غلط گیری بسیار دقیق تر و مورد اعتماد تر از پردازش ها دیگر است چون با زبان دقیق و نزدیک ماشین کار می کند و نه زبان های برنامه نویسی نزدیک به انسان.
ذکر این نکته هم مهم است که استاندار سازی دارای معنی دقیقی است. متاسفانه بعضی از طراحان، این واژه را مخفی نگاه می دارند! به این بهانه که این تست، کاملا اختیاری است و از هیچ استانداری نشات نگرفته است! اما خب به واقع چنین نیست!
چرا باید وب سایت خود را استاندارد کنیم؟
در واقع وب سایت ما، چیزی به جز یک سری کد ها و علائم نشانه گذاری نیست که توسط مرورگر به نمایش در میاید. همان طور که دوستان اطلاع دارند، امروزه دیگر فقط IE در میدان مرورگر ها حضور ندارد. مرورگر های قوی دیگری هم پا به عرصه گذاشتند که هر کدام دارای ویژگی های مخصوص خود هستند. یکی از مهمترین دغدغه های هر طراح سایتی، سازگاری و یکپارچگی وب سایتش، با تمامی نسخه های تمامی مرورگر هاست! وقتی شما سایتتان را استاندارد می کنید، می توانید مطمئن باشید که در هیچ مرورگری دچار مشکل نخواهد شد. بنده هنوز این وبلاگ را با مرورگر اپرا چک نکرده ام. اما از آنجا که این وبلاگ استاندارد سازی شده است، می توانم مطمئن باشم که نه تنها با این مرورگر، بلکه با هیچ مرورگر دیگری هم مشکل خاصی ندارد!
همچنین رعایت کردن این استاندارد، نشان دهنده ی این است که وب سایت شما حرفی برای گفتن دارد.(البته به غیر از این وبلاگ) درست مانند استاندارد ایران و یا ایزو 9002 !
چگونه وبلاگ و یا سایت خود را چک کنیم؟
این کار به راحتی سر زدن به این آدرس است! بعد از باز شدن صفحه، در فیلد مربوطه، آدرس سایت خود را بنویسید و منتظر باشید تا تعداد زیادی خطا مشاهده کنید! بنده چند وبلاگ و سایت ایرانی را چک کردم که یا تعداد اشکالات موجود، بسیار زیاد بود و یا متاسفانه بعضی از وبلاگ ها که اصلا قابل پردازش نبودند توسط این سایت! در کل اگر وب سایت شما بیشتر از 60 و یا 70 مشکل نداشته باشد، می توانید بسیار خوشحال باشید!
نحوه ی بر طرف کردن مشکلات چگونه است؟
بعد از اینکه آدرس سایت خود را وارد کردید، صفحه ای باز می شود که اگر سایتتان مشکلی نداشته باشد، به شما تبریک می گوید و لینکی می دهد که می توانید آن را در سایتتان قرار دهید تا همگان ببینید که سایتتان استاندارد شده است! و یا اگر دچار مشکلی باشد، آن مشکلات را برای شما ذکر می کند. شما باید به دقت، خطا ها ی مربوطه با راه حل هایش را بخوانید و آنها را اجرا کنید. دقت کنید ممکن است از بین بردن یک خطا، به بر طرف شدن چندین مشکل بیانجامد. یعنی این نیست که اگر سایت شما در ابتدا 100 خطا داشت، شما باید دقیقا 100 مشکل را بر طرف کنید.
به این موضوع هم توجه کنید که این پروسه، ممکن است چند ساعتی وقت شما را بگیرد. در ضمن دقت کنید علاوه بر صفحه ی اول سایتتان، بقیه صفحات هم باید استاندراد سازی شوند! که البته بعد از انجام این کار ها، تنها کاری که لازم است انجام دهید تا همیشه وب سایتتان استاندارد بماند، این است که به مطالب جدیدتان دقت کنید تا دچار مشکلی نباشند.
و در پایان:
انجام این کار، نیاز به حوصله، دقت و تا حدی هم مهارت دارد. ممکن است شما نتوانید به تنهایی از بس حل کردن تمامی خطا ها بر بیایید. از دوستان دیگری هم که در این زمینه تجربه دارند کمک بگیرید. اگر دچار مشکلی شدید که نتوانستید آن را حل کنید، می توانید روی من هم حساب کنید. البته اگر قادر به حل آن باشم.
فارسی سازی قالب با CSS
شهریور ۱۳۸۶ - CSS - محمدعرفان شمسیخوشبختانه پستی که چند مدت پیش در مورد CSS نوشتم، با استقبال خوبی مواجه شد و خیلی از دوستان با ارائه ی درخواست هایی، خواستار ادامه ی این بحث شدند. خدا را شکر بالاخره فرصت ایجاد شد تا دوباره به این مبحث بپردازیم. در این پست به دلیل تقاضای تعدادی از دوستان، به طور خلاصه به مبحث فارسی کردن قالب ها می پردازیم. به این امید که مفید واقع شود.
فرض می کنیم یک قالبی از این آدرس دانلود کرده ایم و می خواهیم از آن برای سایتمان که با نیروی وردپرس کار می کند استفاده کنیم. در این پست با هم قدم به قدم تا فارسی کردن این قالب پیش می رویم.
در ابتدای امر، دو مورد در قالب های خارجی نمود زیادی دارد. اول هماهنگ نبودن آن با زبان فارسی و دوم، که ممکن است برای بعضی ها آزار دهنده باشد، وجود منوی سایت در سمت چپ. شما با حل این دو مشکل قدم بسیار بزرگی را بر خواهید داشت. اتفاقا این کار به راحتی نیز ممکن است. شما برای اینکه مطالب را از راست به چپ تنظیم کنید چند راه پیش رو دارید:
راه اول این است که در قسمت body استایل قالب خود(CSS) این خط (direction: rtl) را اضافه کنید:
body {
text-align: center;
direction: rtl;
font-family:tahoma;
margin-top:10px;
margin-bottom:10px;
color:#666666;
background-color: #E0E0E0;
{
با این کار می توانید مطمئن باشید تمام وبلاگ شما، از راست به چپ تنظیم خواهد شد. حتی ممکن است منوی سایت نیز به سمت راست نقل مکان کند! همان طور که احتملا متوجه شدید، با این کار، دست شما کاملا بسته است و در واقع شما اختیاری ندارید. در ضمن ممکن است نیاز داشته باشید قسمتی از وبلاگ به طور پیش فرض و از چپ به راست تنظیم شود. بنابراین توصیه می شود فقط در قسمت هایی که نیاز دارید تگ direction: rtl را اضافه کنید. مثلا قسمت اصلی وبلاگ که مطالب شما قرار میگیرد حتما باید از راست به چپ تنظیم شده باشد. بنابراین شما باید به این قسمت که بسته به قالب، ممکن است با عناوین و id های مختلفی نام گذاری شود، تگ راست به چپ را اضافه کنید.
نکته: وقتی به قسمت CSS می روید، قسمت های مختلفی را مشاهده می کنید که هر کدام شامل چند دستور هستند. به این صورت:
#content {
margin-top: 20px;
margin-bottom: 0px;
direction:rtl;
text-align:right;
margin-left: 180px;
margin-right: 180px;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
line-height: 15px;
color: #333333;
{
به قسمتی که پر رنگ شده است دقت کنید. منظور از id همین است. در این مثال، تمام دستوراتی که در داخل علامت } قرار گرفته اند، نحوه ی چیدمان مطالب بلاگ بنده را مخشص می کنند.
دقت کنید هر جایی که از direction: rtl استفاده کردید، باید از text-align:right نیز استفاده کنید تا مطالب را راست چین کند. با انجام این کار ها، لااقل محتوای سایت شما به درستی به نمایش در خواهد آمد.
کار دیگری که باید بکنید، این است که فونت ها را به Tahoma تغییر دهید. علت این امر هم که کاملا واضح است! برای اینکه منو ی سایت نیز به سمت راست بیاید، می توانید در قسمت مربوطه که معمولا با عناوینی مانند side# مشخص می شود، از تگ float: right استفاده نمایید. به احتمال زیاد جواب خواهید گرفت.
همچنین ممکن است بخواهید که در قسمت نظرات، وقت کسی مشغول نوشتن نظر است، مطالب از راست به چپ تنظیم شوند و مشکلی برای نویسنده به وجود نیاید. این کار نیز به راحتی صورت می پذرید:
input, textarea {
direction: rtl;
text-align: right;
font-family:tahoma;
margin: 1px;
{
با افزودن این چند خط به CSS خود، نه تنها تمام فیلد های متنی، از راست به چپ و با فونت تاهوما تنظیم می شوند، بلکه این تغییرات بر روی دکمه هایی مانند ارسال نظر نیز اعمال می شود که مسلما جلوه ی قالب شما را عوض می کنند.
حال یک سوال پیش میاید و آن اینکه ما چگونه بفهمیم هر قسمت از قالب که قصد انجام تغییر در آن را داریم، با چه id مشخص شده است؟ این سوال دو جواب دارد. اول اینکه اگر کمی وارد باشید و با قالب ور بروید، خودتان می توانید id مربوطه را پیدا می کنید! اما علاوه بر اینکه این راه وقت گیر است، ممکن است عده ای، زیاد به این کار وارد نباشد. راه حل بهتر در استفاده از مرورگر فایرفاکس و استفاده از افزونه ی Web Developer نهفته است. شما می توانید با استفاده از این افزونه مدت ها ذوق زده باشید! البته من نحوه ی استفاده از قسمت های مختلف این افزونه را به خودتان واگذار می کنم اما یک توضیح برای پیدا کردن id ها بدهم. بعد از نصب این افزونه، از طریق گزینه ی information و انتخاب Display ID & Class Dtails می توانید به هدف خود برسید!
توجه کنید این پست به شدت مختصر نوشته شده است. ممکن است برای به دست آوردن یک قالب کاملا فارسی، مجبور به انجام کار های دیگری هم بشوید، اما در مجموع مهمترین کار ها همین ها بودند. فراموش نکنید موارد گفته شده، اصلا موضوع حادی نیستند. اصلا. مطمئنا اگر بودند، خود بنده چیزی ازشون سر در نمیاوردم! پس نگران نشوید. هیچ چیز پیچیده ای وجود ندارد. تنها کلید موفقیت، تکرار و پا فشاری است. در ضمن، اگر قصد فارسی کردن قالبی را دارید و با مشکل مواجه شدید، می توانید روی من حساب کنید.


