طراحان – طراحان | طراحی وب سایت حرفه ای |طراحی فروشگاه اینترنتی http://tarahan.com حرفه ای ترین طراحی وب سایت و فروشگاه اینترنتی | T A R A H A N Mon, 05 Dec 2016 07:42:08 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.10 اهمیت XSLT http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-xslt/ http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-xslt/#respond Mon, 05 Dec 2016 07:17:35 +0000 http://tarahan.com/?p=6743 […]]]> در حقیقت XSLT، یک زبان برنامه نویسی به شیوه آبشاری است که با بهره گیری از آن امکان ساخت اسناد XML به وجود می‌آید. XSLT مخفف eXtensible Stylesheet Language Transformations است که امروزه یکی از پیشرفته‌ترین و کاربردی‌ترین ابزارهای طراحی سایت به شمار می‌رود. زبان XSLT در طراحی سایت، در نقش مبدلی است که XML را به XSLT تبدیل می‌کند. در صورتی که مایل باشید می‌توانید به سایت w3c.org مراجعه کرده و با ویرایشگر آنلاین XSLT نحوه کار با XSLT و چگونگی استفاده از XSLT در طراحی سایت را فرا گیرید. البته سایت‌های فارسی هم در این مورد مطالبی ارائه کرده‌اند اما بهترین روش یادگیری بازدید سایت های مختلف در کنسرسیوم اینترنت می‌باشد.

ضرورت استفاده از XSLT در طراحی سایت

کنسرسیوم شبکه جهانی وب تمایل دارد زبان برنامه نویسی‌ای ارائه نماید که بر پایه اساس Stylesheet باشد. در این راستا به اولین زبانی که دست یافتند XSL و پس از آن XSLT بود. بعد از این‌ها نیز زبان‌های Xpath و XSL-FO به تکامل یافتند.

برای فهم بهتر این موضوع CSS را در نظر بگیرید. نقش CSS در طراحی وب سایت بدین صورت است که از تگ‌های از پیش تعریف شده HTML استفاده کرده تا در رنگ‌ها، فونت‌ها و هر آنچه در حیطه استایل دهی سایت است تغییراتی ایجاد نماید و استایل تازه‌ای به صفحه HTML بخشد. در حقیقت CSS یک Stylesheet برای HTML است. استفاده از تگ‌های HTML درک محتوا را برای مرورگر راحت کرده و به راحتی نمایش داده می‌شود.

xlst1 283x300 اهمیت XSLT

اما استفاده از XSLT در طراحی سایت کمی اوضاع را متفاوت می‌کند. همان گونه که گفته شد XSLT یک شیوه آبشاری و یا همان stylesheet برای XML به حساب می‌آید. در این موارد، مرورگر برای شناسایی تگ‌ها کمی با مشکل مواجه می‌شود و ممکن است نتواند خروجی مناسبی را ارائه کرده و به نمایش در آورد. دلیل آن هم این است که تگ در زبان HTML یک تعریف از جدول باشد اما در XSLT در طراحی سایت ممکن است یک تگ به جدولی در HTML و یا چیز دیگری اشاره داشته باشد!

هدف از استفاده از XSLT در طراحی سایت

هدف از استفاده از XSLT در طراحی سایت تبدیل سندهای XML به XHTML است. البته لازم به ذکر است که XSLT در طراحی سایت در مواردی اقدام به تبدیل XML به سندهای دیگر XML می‌کند. در واقع روال واقعی XSLT تبدیل انواع سندهای XML به نوع دیگری از XML است که این کار را از طریق ویرایشگرها و با کم و زیاد کردن بعضی از ویژگی‌ها انجام میدهد.

بسیاری از عملکردهای تنظیم مجدد مانند نحوه نمایش عناصر در وب سایت، مرتب کردن عناصر و برخی تصمیم گیری‌ها نیز می‌تواند با استفاده از زبان برنامه نویسی XSLT در طراحی سایت صورت پذیرد.

]]> http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-xslt/feed/ 0 طراحی سایت و حفظ اعتبار برند http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%88-%d8%ad%d9%81%d8%b8-%d8%a7%d8%b9%d8%aa%d8%a8%d8%a7%d8%b1-%d8%a8%d8%b1%d9%86%d8%af/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%88-%d8%ad%d9%81%d8%b8-%d8%a7%d8%b9%d8%aa%d8%a8%d8%a7%d8%b1-%d8%a8%d8%b1%d9%86%d8%af/#respond Mon, 07 Nov 2016 08:52:14 +0000 http://tarahan.com/?p=6653 […]]]> حفظ اعتبار برند و طراحی سایت

 فعالیت‌های دیجیتالی و آنلاین یک فرد تمام چیزی است که به صورت آنلاین در اینترنت انجام می‌دهد. این فعالیت‌ها شامل پست گذاشتن در یک وبلاگ نظر گذاشتن در رسانه‌های اجتماعی و خرید محصولات از وب سایت‌های تجارت الکترونیک می‌شود. فعالیت‌های اینترنتی شما با بیان موارد زیادی درباره برند و وب سایتتان به کاربران، به حفظ اعتبار برند و طراحی سایت سایتتان کمک می‌کند.

Brand2 300x200 طراحی سایت و حفظ اعتبار برند

این مورد می‌تواند برای جمع آوری اطلاعات، معرفی هویت و حتی اعتبار برند و یا وب سایتتان باشد. در این مقاله به ۸ توصیه مختلف رجوع می‌کنیم که به مدیریت فعالیت آنلاینتان کمک می‌کند تا دریابید که این فعالیت‌ها در جهت پیشبرد وب سایت و برندتان کار می‌کنند و یا بالعکس.

۱.دریابید که در اطرافتان چه اتفاقاتی می‌افتد.

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

۲.اطمینان حاصل کنید که پست‌های شخصیتان، خصوصی باقی می‌ماند.

Brand1 257x300 طراحی سایت و حفظ اعتبار برنداطمینان حاصل کنید که پست‌های شخصیتان که نمی‌خواهید کارمندان و یا اشخاص دیگر ببینند، قفل شده‌اند.  برخی وب سایت‌های شبکه‌های اجتماعی هر چند وقت یک بار کنترل سیاست‌های حفظ حریم شخصی خود را تغییر می‌دهند. در غیر این صورت، ممکن است تصاویر شخصیتان که در یک مهمانی هستید، در اینترنت پخش گردد و این امر برای برند و وب سایتتان مفید نمی‌باشد. از این رو، اطمینان حاصل کنید که همیشه این تنظیمات را بررسی می‌کنید. اما به یاد داشته باشید که این موارد ممکن نیست همیشه از شما محافظت به عمل آورد.

صفحه‌های موجود در وب سایت‌های اجتماعی ممکن است در مروگرها نیز پخش گردد و زمانی که این اتفاق افتاد هر کسی می تواند تصویر، ویدئو، صدا و غیره را از صفحه شما برداشته و در وب سایت‌های دیگر دوباره پست کند. شما در این شرایط هیچ کنترلی روی موارد شخصی خود نخواهید داشت و به اعتبار برند و وب سایتتان صدمه خواهید زد.

۳. نرم افزارهای خود را به روز نگاه دارید.

هیچ چیز بیشتر از داشتن اطلاعات ویروسی و اشتراکشان با دیگران، نمی‌تواند به هویت برند و وب سایتتان آسیب بزند. از این رو بسیار اهمیت دارد تا نرم افزار آنتی ویروس،  Vpn (شبکه‌های مجازی شخصی)، اسکنرهای بد افزار و دیگر برنامه‌ها و نرم افزارهایتان فعال و به روز رسانی شده باشد. این موارد شامل سیستم اجرایی وب سایتتان نیز می‌باشد. اطمینان حاصل کنید که از نسخه‌های به روز نرم افزارها برای امنیت بیشتر، دانلود کرده و نصب می‌نماید.

۴.از رمز عبورهای قدرتمندی استفاده کنید.

به همین ترتیب شما نیاز دارید تا اطمینان حاصل کنید که اکانت‌های آنلاینتان نیز با رمز عبورهای قدرتمند، محافظت و مراقبت شده است. یک رمز عبور و یا پسورد می‌تواند شامل موارد زیر و یا ترکیبی از آن‌ها باشد:

  • حروف بزرگ
  • اعداد
  • نشانه‌ها

شما رمز عبوری می‌خواهید که برای حدس زدن ساده نباشد، از این رو از اسم‌های معمول فامیلی و یا تاریخ تولد و یا شماره همراه و غیره برای تنظیم رمز عبور خودداری کنید. یک برنامه خوبی که می‌توانید برای ساخت رمز عبور قدرتمند از آن کمک بگیرید، ۱password می باشد.

۵. بسط دادن فعالیت‌های آنلاین خود

برخی کاربران سایت‌ها در خرید محصولات به صورت اینترنتی دچار شک و تردید هستند، آن‌ها دارای یک کارت اعتباری مخصوص برای خریدهای اینترنتی خود هستند. اگر آن‌ها از کارت اعتباری خود برای خرید محصولات یک وب سایت استفاده نکنند، به معنی شکست برند و وب سایت مورد نظر می‌باشد. شما باید فعالیت‌های آنلاین خود را بسط دهید تا بیشتر شما، تجارت، برند و سایتتان شناخته شود و از این رو می‌توانید کنترل اوضاع را به دست بگیرید.

شما این کار را می‌توانید با ایمیل‌های وب سایت نیز انجام دهید- به هنگام طراحی سایت یک ایمیل برای خود بسازید و زمانی می‌توانید از آن استفاده کنید که کاربر وب سایت در سایت شما ثبت نام کرده و عضو شده باشد. ایمیلی برای خود باید تنظیم کنید که مخصصوص وب سایت و دیگری مخصوص رسانه‌های اجتماعی باشد. شاید تعدد آدرس ایمیل‌ها برای شما گیج کننده باشد، اما در نهایت به راحتی می‌توانید روی ایمیل‌های هر بخش خود به راحتی مدیریت داشته باشید.

۶. آیا از اپلیکیشن‌ها استفاده می‌نمایید؟

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

۷.کوکی‌های مرورگر خود را بررسی کنید.

آیا می‌دانستید که شما می‌توانید وب سایت‌هایی را مشاهده کنید که مرورگرتان کوکی آن‌ها را بپذیرد؟ از این رو، باید به طور منظم بررسی کنید که آیا وب سایت‌های نا آشنایی به مرورگرتان کوکی‌های می‌فرستند یا خیر. اگر این چنین سایت‌های نا آشنا وجود داشت باید آن‌ها را در تنظیمات مرورگرتان حذف نمایید. اگر در این مورد نمی‌توانید کاری انجام دهید، پلاگین‌های در دسترس زیادی وجود دارد که به کنترل بهتر کوکی‌هایتان، بسیار کمک می‌کند.

۸. باید بدانید مواردی را که حدف می‌کنید، در پایگاه داده و یا آرشیو هم چنان موجود است.

حتی اگر مواردی را در اینترنت و یا طراحی سایت خود حذف می‌کنید، باید بدانید که هنوز هم در پایگاه داده‌ها و آرشیو‌ها برای همیشه باقی می‌مانند. در خیلی از شرایط، حتی اگر شما موردی را حذف کنید، می‌تواند هنوز هم قابل دسترس باشد. زمانی موردی را که به صورت آنلاین در وب سایت و یا وبلاگ خود قرار می‌دهید باید بدانید که راه بازگشتی وجود ندارد، از این رو در کلیک کردن روی کلمه “ارسال” بسیار دقت کنید.

این موارد تنها توصیه‌های اندکی بودند که می‌توانند برای مدیریت فعالیت‌های اینترنتیتان استفاده شوند و اطمینان حاصل شود که تحت کنترل می‌باشند.

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%88-%d8%ad%d9%81%d8%b8-%d8%a7%d8%b9%d8%aa%d8%a8%d8%a7%d8%b1-%d8%a8%d8%b1%d9%86%d8%af/feed/ 0 طراحی سایت تک صفحه ای http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b5%d9%81%d8%ad%d9%87/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b5%d9%81%d8%ad%d9%87/#respond Sat, 05 Nov 2016 13:02:16 +0000 http://tarahan.com/?p=6647 […]]]> در طراحی سایت تک صفحه‌ای یا بدون صفحه تمامی اطلاعات در یک صفحه نمایش داده می‌شود که با اسکرول خوردن و بالا و پایین رفتن در صفحه می‌توان تمامی اطلاعات مورد نظر آن سایت را به دست آورد. اما در اکثر سایت‌ها اطلاعات در صفحات مختلفی قرار دارند که باید با کلیک کردن بر روی آن‌ها وارد صفحه جدید شد و اطلاعات را کسب نمود.

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

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

مزایای سایت‌های بدون صفحه یا تک صفحه‌ای

۱- سازگاری با گوشی‌های موبایل و جذب کاربر:

در گوشی‌های موبایل و یا تبلت‌ها، اگر یک وب سایت تک صفحه‌ای باشد و تمام اطلاعات در همان صفحه وجود داشته باشد، مشاهده سایت برای کاربر راحت‌تر و ساده‌تر می‌باشد تا این که بخواهد وارد صفحات دیگر شود تا اطلاعات را به دست آورد. بیشتر مردم، سایت‌های ساده و جذاب را نسبت به سایت‌های شلوغ و پیچیده می‌پسندند. پس شما می‌توانید با طراحی سایت زیبا و جذاب و تک صفحه‌ای، کاربر اینترنتی را به سمت سایت خود جذب نمایید.

۲- پیمایش راحت تر صفحه و رساندن پیام به مخاطب:

رساندن پیام در وب سایت‌های تک صفحه‌ای بسیار راحت تر  و تاثیر گذارتر از وب سایت‌های چند صفحه‌ای می‌باشد. چون که پیمایش در سایت‌های تک صفحه‌ای راحت‌تر می‌باشد ولی در سایت‌های چند صفحه‌ای پس از کلیک کردن بر روی لینک مورد نیاز، باید صبر کرد تا صفحه بار گذاری بشود و در این بین ممکن است به دلیل پایین بودن سرعت صفحه، کاربر سایت را ترک نماید.

۳- سازماندهی بهتر مطالب:

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

در زیر نمونه‌ای از یک وب سایت تک صفحه‌ای را می‌توانید مشاهده کنید:

screencapture iranhydrogroup 1478350717999 125x300 طراحی سایت تک صفحه ای

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b5%d9%81%d8%ad%d9%87/feed/ 0 اهمیت رنگ در طراحی سایت http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-%d8%b1%d9%86%da%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-%d8%b1%d9%86%da%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Sat, 05 Nov 2016 06:17:14 +0000 http://tarahan.com/?p=6637 […]]]>

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

در هر صورت یک اصل کلی وجود دارد که می‌گوید‌: در رنگ بندی یک صفحه، باید به این موضوع توجه شود که این رنگ قرار است در چه صفحه‌ای و با چه موضوعی به کار رود. یعنی اصل توجه به عملکرد و موضوعیت سایت، به رنگ در طراحی سایت ختم می‌شود و بسیار مهم است که این  قوانین رعایت شوند.

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

در ادامه این مطلب، فقط قصد یادآوری نوع روان شناسی هر رنگ در مخاطبان از دید روان شناسان داریم و فعلاً در مورد این که چه نوع رنگی برای چه سایتی مناسب است، صحبت نمی‌کنیم. اگر چه این توضیحات، خود نیز بیانگر استنتاجات خوبی هستند که وب مسترها را در گرافیک سایت، به خوبی هدایت می‌کند.

رنگ در طراحی سایت

یک بهترین رنگ نداریم!

در مدیریت نوین یک اصل پذیرفته شده وجود دارد که یک بهترین شیوه مدیریت در کار وجود ندارد. ترکیب و هماهنگی و استقرار یک نظام در رنگ بندی صفحات وب نیز، چنین رویکردی دارد. تجربه و نوع علاقه و هنر web designer هست که سایتی را برای ما جذاب و سایتی دیگر را next می‌کنیم. نکاتی که می‌بایست در زمان طراحی گرافیکی سایت در نظر داشته باشیم به شرح زیر هستند.

اثر روان شناسی رنگ

  • قابلیت خواندن متون صفحات سایت . مثل سایت : (www.iranbusinesstime.com)
  • رنگ متمم رنگ‌های انتخابی برای بک گراند ، گرافیک‌ها ، لینک‌ها و متون ( مثل سایت www.ray-com.com )
  • وجود تطبیق رنگی بین لوگوها و آرم‌های صفحات با رنگ بندی متون و مطالب به کار گرفته شده (مثل سایت www.mrhost.ir )
  • وجه به نوع مخاطب و بازدیدکننده بخش‌های مختلف سایت .

سایتی مانند یاهو ، که روزانه میلیون‌ها مخاطب دارد و از صدها بخش متنوع تشکیل شده است، برای هر بخش خود از یک چیدمان و رنگ بندی خاص در طراحی صفحات اکتیو، استفاده کرده است . به طور مثال، بخش کودکان یاهو با بخش بازرگانی آن بسیار تفاوت دارد.

۵ اصل مهم

لیست زیر مشخصه‌هایی از رنگ‌ها را که هنگام طراحی باید مد نظر داشته باشید بیان می‌کند:

  • رنگ‌ها اثر زیادی روی احساسات ما در ۹۰ ثانیه اول دیدن می‌گذارند.
  • اثر رنگ می‌تواند بیننده را ترغیب به خرید یک جنس از شما کند.
  • رنگ‌ها رفتار ما را در برابر یک موضوع فقط تشدید نمی‌کنند، بلکه اثر خود را کاملاً در رفتار ما نشان می‌دهند.
  • اثر گذاری رنگ در فرهنگ‌های مختلف گوناگون است!
  • هر رنگ به تنهایی یک پیام مخصوص به چشم بیننده می‌فرستد. به قول مک لوهان، رسانه همان پیام است.

روان شناسی رنگ‌ها

Colors1 300x176 اهمیت رنگ در طراحی سایت

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

سفید : اشاره دارد به صداقت، پاکیزگی، صمیمیت، ملایمت و معاصر بودن چیزی. سفید بهترین رنگ برای بک گراندهای وب است. در تجارت سفید رنگ خستگی گیر و انرژی بخش است .

سیاه : اشاره دارد به ظرافت، قدرت، دلیری، شهامت، فریبندگی، شیطان، مهارت و باستان. مشکی برای رنگ متن روی یک پس زمینه روشن ایده آل است. این رنگ به عنوان رنگ پس زمینه چشم را خسته می‌کند.

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

آبی : امنیت، اعتماد، مسیولیت پذیری، سرما، ایمان، وفاداری، وابستگی و جاه و جلال. آبی دومین رنگ عوام پسند است. در تجارت به معنای ضمانت مالی است .

سبز : تندرستی، فراوانی، حاصل خیزی، آزادی، شفا و بهبودی، طبیعت، پیشرفت، حسادت و خونسردی. در تجارت بیانگر مقام و ثروت است. این رنگ در چشم‌ها راحت‌تر از همه دیده می‌شود .

قهوه ای : تاثیر گذاری، متانت، توانگری مالی و کمک کننده بودن. قهوه‌ای رنگ کره خاکی ماست و در طبیعت بسیار فراوان است .

خاکستری : صمیمیت زیاد، اعتبار و نفوذ و عملی بودن. در تجارت به معنای سنت گرایی است .

صورتی : ملایمت، شیرینی، ظرافت و زنانگی، خوب بودن، بی گناهی و پرورش کودک .

بنفش : وقار، معنویت، شاهانه بودن، عیش و نعمت، دارایی، اعتبار و نفوذ، سوگواری و مهارت. در تجارت بزرگ نشان دادن است. بنفش طرفداری از سبک‌های هنرمندانه است.

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

زرد : نور خورشید، گرمی، خوشی، نامردی، ترسویی و حسادت. در تجارت درخواست از نوع روشنفکرانه است و برای تاکید نیز خوب است. زرد باعث افزایش تمرکز شده، سوخت و ساز را زیاد می‌کند و سخت‌ترین رنگ برای چشم‌هاست .

طلایی : نشانگر گران بودن و پرستیژ است .

نقره ای : سرما  علمی بودن و اعتبار و پرستیژ است .

پس وقتی می‌خواهید رنگی انتخاب کنید باید درباره بازار نهایی کار خود بیاندیشید. چه احساساتی را می‌خواهید برانگیخته کنید؟ اول کمی درباره چشم انداز احساسی هدفتان فکر کنید و نیز پیامی که از راه دید می‌خواهید منتقل کنید. بعد رنگ خود را انتخاب کنید! توجه داشته باشید که گرافیک صفحات وب، امروزه نقش زیادی را در ارائه دکترین رفتار سازمانی الکترونیکی مراکز رسانه‌ای غرب به مخاطبان در اختیار دارند و LOGO ، BANNER ، TEASERها، فوق العاده در تحکیم مفاهیم به مخاطبان وبی، موثر هستند.

]]> http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-%d8%b1%d9%86%da%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 مدیریت وب سایت http://tarahan.com/%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/#respond Mon, 31 Oct 2016 09:01:23 +0000 http://tarahan.com/?p=6624 […]]]>

در این مقاله ابتدا فرایندهای مربوط به وب سایت‌ها را، به دو قسمت «فرایند طراحی، ایجاد و راه اندازی وب سایت» و «فرایند مدیریت، نگهداری و پشتیبانی وب سایت» تقسیم می‌کنیم، سپس با ارائه  تعریفی از مدیریت وب سایت، وظایف اصلی مدیر وب سایت را بر می‌شماریم. در ادامه، پس از اشاره به مسائل ده گانه مشترک در اغلب وب سایت‌ها، مباحث ده گانه مربوط به مدیریت وب سایت‌ها را مورد بررسی قرار می‌دهیم؛ مباحثی شامل مدیریت راهبردی، فنی، محتوایی، گرافیک، خدمات، امنیت، مالی، بازدیدها، تبلیغات و مدیریت کاربران وب سایت.

به طور کلی، فرایندهای مربوط به وب سایت ها در دو دسته می‌گنجد:

  • فرایند طراحی، ایجاد و راه اندازی وب سایت.

  • فرایند مدیریت، نگهداری و پشتیبانی وب سایت.

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

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

CMS1 300x143 مدیریت وب سایت

قلمرو مدیریت وب سایت

تصور رایج این است که مدیریت وب سایت، چیزی جز به روزرسانی و ارسال اطلاعات به وب سایت نیست؛ حال آن که حتی در ساده‌ترین وب سایت‌ها نیز وظایف مدیر وب سایت فراتر از این است. مدیر وب سایت، مانند مدیر یک پروژه، یا مدیر یک سازمان، رسیدگی به همه امور وب سایت را بر عهده دارد. همان گونه که مدیر یک پروژه یا مدیر یک سازمان، امور مربوط به پروژه یا سازمان را با همکاری و همفکری گروهی از همکاران سامان می‌دهد، مدیر وب سایت نیز در انجام امور مربوط به وب سایت، از همکاری و همفکری گروهی از افراد متخصص و با تجربه بهره می‌برد.

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

پاره‌ای از مهم‌ترین وظایف مربوط به مدیریت وب سایت از این قرار است:

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

آغاز فرایند مدیریت وب سایت

بهترین زمان برای آغاز کار تیم مدیریت وب سایت، آغاز مراحل طراحی و ایجاد وب سایت است؛ اما چنین رایج است که معمولاً گروه مدیریت وب سایت، پس از طراحی و راه اندازی وب سایت به کار گمارده می‌شوند.

وب سایت‌ها نیز مانند اغلب سازمان‌ها و ادارات، از بخش‌ها و ساخت‌های مختلفی تشکیل می‌شوند و همان گونه که هر یک از بخش‌های سازمان، به وسیله فرد یا افرادی مدیریت می‌شود، مدیریت وب سایت نیز بر عهده فرد یا افرادی گذاشته می‌شود. مدیریت هر وب سایت به وسیله گروهی از افراد با مهارت‌های مختلف، و با سرپرستی مدیر اصلی وب سایت پی گیری می‌شود. البته مشارکت تعداد افراد در مدیریت وب سایت به نوع و حجم کارهای وب سایت بستگی دارد؛ گاهی ممکن است همه امور وب سایت را یک یا دو نفر اداره کنند و چه بسا هر بخش از وب سایت، به وسیله گروهی از افراد به سرپرستی مدیر گروه و نهایتاً زیر نظر مدیر اصلی وب سایت اداره شود.

CMS2 300x208 مدیریت وب سایت

مسائل مشترک بیشتر وب سایت ها، ازاین قرار است:

  1. سیاست و راهبرد وب سایت؛
  2. امور فنی (نرم افزار مدیریت محتوای وب سایت)؛
  3. انواع محتوا؛
  4. طراحی و گرافیک؛
  5. خدمات، امکانات و ابزارها؛
  6. امنیت؛
  7. زمان بندی، بودجه و مسائل مالی؛
  8. تبلیغات؛
  9. تعامل با موتورهای جستجو؛
  10. امور کاربران وب سایت.
]]> http://tarahan.com/%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 هشتگ (Hashtag) http://tarahan.com/%d9%87%d8%b4%d8%aa%da%af-hashtag/ http://tarahan.com/%d9%87%d8%b4%d8%aa%da%af-hashtag/#respond Mon, 31 Oct 2016 08:19:51 +0000 http://tarahan.com/?p=6612 […]]]>

هشتگ (Hashtag) اولین بار به منظور نام گذاری گروه‎ها‎ و موضوعات در چت IRC مورد استفاده قرار گرفت؛ به این صورت که با اضافه کردن کاراکتر «#» قبل از حروف یا کلمه‌ای خاص، امکان جست و جوی سریع آن برای کاربران فراهم کردند. پیدایش توییتر به وسیله هشتگ (Hashtag)صورت پذیرفت. اولین باری که هشتگ (Hashtag)  استفاده شد، در سال ۲۰۰۷ توسط گروهی با نام کریس مسینا بود که در توییتر اقدام به استفاده از هشتگ نمودند . اوایل پیدایش، استفاده از هشتگ برای کاربران عمومی به نوعی ترفند برای بهبود رتبه در نتایج جست و جو اعلام شد و هیچ استفاده دیگری برای آن در نظر گرفته نشده بود. این در حالی است که عده‌ای دیگر از کاربران، کاربرد صحیح از هشتگ را آموخته بودند و برای کارهایی غیر از جست و جوی مطالب استفاده می‌کردند. برای نمونه #sandiegofire که در اخبارها استفاده شد.

استفاده از هشتگ (Hashtag) در توییتر

توییتر در سال ۲۰۰۹ به این نتیجه رسید که کاربران با استفاده از یک روش جدید، شیوه‌ای را متداول نموده‌اند که بین همه کاربران با استقبال زیادی مواجه شده است. بنابراین هشتگ‎ها‎ به لینک تبدیل شدند که به صفحه‌ای مجزا و شامل تمام موضوعات مرتبط با آن، منتهی می‏‌شد. دو سال بعد، توییتر قسمتی را با نام Trending Topics ایجاد کرد که برای کاربران این قابلیت را ایجاد می‏‌کرد تا آنان موضوعاتی را که بین همه مرسوم است را مشاهده کنند و سپس موضوعات محبوب در بین کاربران، به ابتدای لیست منتقل می‌‏شدند.اما این امر موجب شد تا کم کم موضوعات نامناسب و بی محتوا به ابتدای لیست صعود کنند که برای کاربران چندان خوشایند نبود. با این وجود نمی‌توان گفت هشتگ‎ها‎ تاثیرات مثبت نداشته‌اند چرا که موجب دسته بندی و فیلتر مطالب، با توجه به موضوع و محل می‌‏شدند.

نحوه استفاده از هشتگ (Hashtag)

unnamed file 2 300x200 هشتگ (Hashtag)

هدف اصلی در استفاده از هشتگ، جست و جو در موضوعی خاص است. در بعضی از نرم افزارهای مرتبط با توییتر، می‏توان هشتگ (Hashtag)را خاموش کرد. برای مثال اگر کاربر تمایلی برای دنبال نمودن مطالب مرتبط با #sport را ندارد، می‏‌تواند آن‌ها را از نتایج خود و لیست خارج نماید. این شرایط موجب سلیقه‌ای شدن استفاده از هشتگ‎ها‎ می‏‌شود. زیرا هر کس بر حسب علاقه و سلیقه خود اقدام به حذف هشتگ (Hashtag) می‏‌کند.در تمام محتوای توییت می‏‌توان از هشتگ استفاده کرد اما نباید از ارتباط هشتگ با موضوع متن غافل شد و در استفاده از آن تعادل را حفظ نمود. بهتر است بیشتر از ۲ عدد هشتگ در یک توییت استفاده نکنید و عبارات عمومی و مناسب را پیدا کرده تا در اختیار سایر کاربران قرار بگیرد. توجه داشته باشید که عبارات یا کلمات خاص و طولانی ممکن است باعث ناکارآمدی استفاده از هشتگ شود.

شبکه‎ها‎یی که از هشتگ (Hashtag) استفاده می‏‌کنند.

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

کاربردهای هشتگ (Hashtag) 

اطلاع رسانی گروهی با استفاده از هشتگ

برای هماهنگی‎ها‎یی که در شبکه‎ها‎ی اجتماعی صورت می‎گیرد، می‎توان از هشتگ (Hashtag)استفاده کرد. برای مثال می‎توان در مطالب، یک کلمه یا نام گروه را هشتگ نویسی نمود. بدین طریق هر کدام از حامیان گروه با جست و جوی ساده می‎توانند مطالب مورد نظر خود را پیدا کنند.

ارتقا ارزش مطالب

با استفاده از هشتگ می‎توان میزان دست رسی به محتوای کمپین‌ها را افزایش داد. هم چنین مطالبی که در گذشته بارگذاری شده و دسترسی کاربران به آن سخت شده است، با استفاده از هشتگ (Hashtag) قابل دست رسی شده و در نتیجه اهمیت هشتگ بیش از پیش شده است.

تاثیرات مطلوب بر تجارت

unnamed file 1 300x200 هشتگ (Hashtag)

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

مزایای هشتگ (Hashtag) 

  1. استفاده از این فرایند برای افزایش شهرت یک موضوع خاص
  2. ایجاد فضایی برای میزبانی از گفت و گوهای اینترنتی
  3. دریافت اطلاعات درباره یک موضوع خاص به صورت یک جا
  4. سازماندهی توییت‎ها‎ و مطالب منتشر شده در شبکه‎ها‎ی اجتماعی
  5. افزایش تعداد هواداران یا دوستان در شبکه‎ها‎ی اجتماعی
  6. تبلیغات شرکت‎ها‎ی مختلف برای محصولاتشان در فضای مجازی

ابزارهای دسته بندی هشتگ (Hashtag)

برای دسته بندی هشتگ از چندین سایت استفاده می‎شود که در زیر به ۳ نمونه اشاره می‎کنیم که برای فهم و اطلاع دقیق از معنای هشتگ‎ها‎ می‎توان در این سایت اطلاعات دقیقی را بدست آورد.

سایت hashtags: در این سایت می‎توان هشتگ‎ها‎ی رایج و پر بیننده را پیدا کرد که مفهوم و معنای هر هشتگ در زیر آن توضیح داده شده است.

سایت wthashtag: به عنوان سایت مرجع هشتگ محسوب می‎شود که در آن کاربران منبع هشتگ را ویرایش می‏‌کنند.

]]> http://tarahan.com/%d9%87%d8%b4%d8%aa%da%af-hashtag/feed/ 0 الگوریتم جدید گوگل http://tarahan.com/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85-%d8%ac%d8%af%db%8c%d8%af-%da%af%d9%88%da%af%d9%84/ http://tarahan.com/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85-%d8%ac%d8%af%db%8c%d8%af-%da%af%d9%88%da%af%d9%84/#respond Mon, 31 Oct 2016 07:50:25 +0000 http://tarahan.com/?p=6597 […]]]>

این یک واقعیت است که گوگل انقلاب در صنعت تلفن‌های همراه را هدایت می‌کند، بنا بر این به طور مرتب از الگوریتم جدید گوگل در نتایج جست و جوی کاربران خود استفاده می‌کند. گوگل بزرگ‌ترین ارائه کننده پلتفرم تلفن‌های همراه جهان است (اندروید). گوگل هم چنین بزرگ‌ترین ارائه دهنده موتور جست و جو برای تلفن‌های همراه در جهان می‌باشد. علاوه بر این، گوگل بزرگ‌ترین فروشگاه نرم افزارهای تلفن همراه را در اختیار دارد که با نام Google Play شناخته می‌شود. به عبارت دیگر، گوگل تلاش دارد تا تمام ارتباطات عصر جدید با تلفن همراه انجام شوند. با وجود تحقق تمام این اتفاق‌ها، این غول بزرگ کامپیوتری، با داشتن سهم بزرگی از دستگاه‌های موبایلی، جست و جو و نرم افزارها راضی نمی‌شود؛ بلکه می‌خواهد  تمام امواج موجود در هوا را نیز به خود اختصاص دهد. در این مقاله سعی داریم تا سایت‌هایی با مواضع موبایلی گوگل سقوط خواهند کرد را به شما معرفی کرده و راه کارهای مقابله و جلوگیری از این اتفاق را بیان کنیم.

گوگل الگوریتم جست و جوی خود را برای حمایت از سایت‌های سازگار با تلفن همراه (Mobile-Friendly) بازسازی خواهد کرد. طبق اعلان مرکز مدیریت وب سایت گوگل (Google Webmaster Central)، الگوریتم جدید گوگل مهم‌‎ترین تغییر الگوریتم موبایلی خود را در تاریخ زیر اعمال خواهد کرد:

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

یک وب سایت سازگار با تلفن همراه یا mobile-friendly چیست؟ خوش بختانه فهمیدن این موضوع بسیار آسان است و فقط می‌بایست وب سایت خود را در صفحه تست گوگل برای سازگاری با تلفن همراه اجرا نمایید. لازم به ذکر است که این تست بدون نقص نیست. گوگل خودش با قرار دادن یک فرم بازخورد، به این موضوع اقرار می‌کند. با این حال، تست سازگاری با تلفن همراه به طور کلی یک سنجش مفید از عملکرد موبایلی یک وب سایت است. یک روش دیگر برای چک کردن یک وب سایت، جست و جوی آن از طریق دستگاه‌های تلفن همراه می‌باشد. اگر در نتایج این جستو جو سایت مورد نظر برچسب mobile friendly بخورد در این صورت این سایت مورد تایید گوگل می‌باشد. در نهایت، شما باید وب سایت خود را از طریق گزارش قابلیت موبایلی گوگل در webmaster tools، اجرا کنید تا به توصیه‌های مربوطه آن دست بیابید که استفاده موبایلی سایت شما را بهبود بخشد.

Google 300x169 الگوریتم جدید گوگل

این تغییر الگوریتم “قابل توجه” خواهد بود

گوگل مجدداً در اعلامیه خود درباره این الگوریتم از واژه تغییر قابل توجه استفاده کرده است. “این تغییر روی جست و جو های موبایلی در همه زبان‌های سراسر جهان تاثیر خواهد گذاشت و هم چنین تاثیر قابل توجهی در نتایج جست و جوی گوگل خواهد داشت.”

تاثیر واقعی یک تغییر الگوریتم وقتی گفته می‌شود این تغییر قابل توجه است، چقدر خواهد بود؟ با جست و جوی آرشیو وبلاگ وب مسترها برای کلمه قابل توجه در مورد :تغییرات الگوریتم‌ها، به تغییرات الگوریتم بزرگ زیر می‌رسیم که گوگل در اعلام آن‌ها از واژه تغییر قابل توجه استفاده کرده است

• Crawling – ۲۰۱۲

• Markup – ۲۰۱۰

• Linking – ۲۰۰۹

• Panda 1.0 – ۲۰۱۲

به نظر می‌بایست برای تغییرات و چیزهایی که گوگل آن‌ها را قابل توجه می‌نامد آمادگی داشت. در حال حاضر ما می‌دانیم که این به روز رسانی از پاندا و پنگوئن هم بزرگ‌تر خواهد بود. هم‌چنین ما می‌دانیم که گوگل موبایل را بسیار مهم در نظر گرفته است و برای همین آن‌ها دارند روی همه جنبه‌ها و مظاهر آن کار می‌کنند. با این به روز رسانی جست و جو، می‌بایست خود را برای تنظیم تکنیکی همگام با توابع جست و جوی موبایلی مجدداً آماده کنیم.

پیش بینی‌های اولیه ما این است که صفحات بهینه نشده برای سازگاری با موبایل‌ها در رتبه بندی موبایلی و احتمالاً رتبه بندی desktop شاهد افت خواهند بود و هر صفحه فاقد بهینه سازی موبایلی دیگر رتبه‌ای برای کلمات کلیدی شان به دست نخواهد آورد. دیگر این که در صفحه اول نتایج جست و جو برای هر کلمه کلیدی فقط وب سایت‌های mobile-friendly قرار خواهند گرفت. الگوریتم جدید گوگل هر صفحه را به صورت جداگانه ارزیابی می‌کند. یکی از ویژگی‌های قابل توجه الگوریتم جدید گوگل، تجزیه و تحلیل سازگاری موبایلی بر اساس صفحه به صفحه می‌باشد به جای این که بر اساس کل وب سایت تحلیل شود.

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

بدیهی است که گوگل فقط زمانی می‌تواند سازگاری یک وب سایت با موبایل‌ها را ارزیابی کند که ربات‌های خزنده صفحه را ببینند و آن را برای جست و جو ایندکس کنند. در این زمان سایت شما رتبه خود را گرفته است. حالا اگر وب سایت شما در تاریخ ۲۱ آوریل سازگار با تلفن همراه نباشد و در تاریخ ۲۵ سازگار شود، بنابراین در دفعه بعد که ربات گوگل در سایت شما بخزد، رتبه شما بهبود می‌یابد.

Seo 300x160 الگوریتم جدید گوگل

آن چه برای دسکتاپ خوب است برای موبایل هم خوب است

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

ایندکس شدن اپلیکیشن موبایلی از حالا یک عامل در نتایج جست و جو است

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

گوگل مراحل زیر را برای تسهیل ایندکس شدن برنامه‌ها توصیه می‌کند:

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

– تایید وب سایت رسمی برنامه تان در کنسول Google play.

– ارائه لینک‌های خوب برای هر صفحه مرتبط وب سایت.

– بررسی خطاها در webmaster tools و برطرف کردن آن‌ها.

نتیجه گیری: در مورد این الگوریتم جدید گوگل چه باید کرد .

۱. به عنوان اولین اقدام، وب سایت خود را با موبایل سازگار نمایید. سایت ریسپانسیو، بهترین گزینه است.

۲. دوم این که در webmaster tools گوگل به تمام مشکلات قابلیت استفاده موبایلی وب سایت خود رسیدگی کنید.

۳. اگر برنامه اندرویدی مرتبط با وب سایت خود دارید، هر چه سریع‌تر آن را به وب سایت خود متصل کنید و ایندکس هم نمایید.

۴. بر معیارهای خود با دقت نظارت کنید تا زمان اجرای الگوریتم جدید گوگل در تاریخ ۲۱ آوریل و پس از آن.

]]> http://tarahan.com/%d8%a7%d9%84%da%af%d9%88%d8%b1%db%8c%d8%aa%d9%85-%d8%ac%d8%af%db%8c%d8%af-%da%af%d9%88%da%af%d9%84/feed/ 0 افزایش سرعت بارگذاری سایت http://tarahan.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b1%d8%b9%d8%aa-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b1%d8%b9%d8%aa-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Sun, 30 Oct 2016 07:22:52 +0000 http://tarahan.com/?p=6558 […]]]> ما همیشه به دنبال روش‌ها و افزونه‌هایی هستیم که به ما در سرعت بخشیدن به سایت‌هایمان کمک کند. در خصوص سایت‌های فروشگاهی، سرعت بارگذاری سایت تاثیر به سزایی در میزان فروش دارد. یکی از روشهایی که بسیاری از طراحان برای افزایش سرعت بارگذاری سایت خود استفاده می کنند، CDN یا شبکه توزیع محتوا می‌باشد. نکته حائز اهمیت این است که CDN می‌بایست در کنار سایر تکنیک‌های بهینه سازی به کار رود تا بتواند سرعت بارگذاری سایت را پایین نگه دارد، در غیر این صورت اثر آن محسوس نخواهد بود. از آنجایی که تجارت جهانی روز به روز بیشتر به سمت دیجیتالی شدن سوق پیدا می‌کند، تجارت آنلاین و به خصوص سرعت سایت از اهمیت بیشتری برخوردار می‌شوند. بنا بر این لازم است تا سایت خود را با ویژگی‌های زیر مجهز کنید.

  • یک هاست خوب انتخاب کنید

Server 300x133 افزایش سرعت بارگذاری سایت

بنا بر تحقیقات انچام گرفته توسط سایت Akamai، تقریباً نیمی از مردم توقع دارند صفحات سایت در زمانی کمتر از ۲ ثانیه لود شوند و حدود ۴۰% از مردم گفته‌اند که اگر این زمان تنها یک ثانیه افزایش پیدا کند، صفحه را ترک می کنند. سایت‌های فروشگاهی با دنبال کردن اهدافی همچون جذب مشتری و افزایش فروش، بیش از سایر سایت‌ها به سرعت لود و بار گذاری مطالب اهمیت می‌دهند. مطالعه‌ای با عنوان “چرا عملکرد سایت اهمیت دارد. آیا سایت شما مشتری‌ها را دور می‌کند؟” ادعا می‌کند در ساعات اوج ترافیک، بیش از ۷۵% از مشتری‌ها ترجیح داده‌اند به جای انتظار در صفحه فعلی برای لود مطالب، سایت را بسته و سایت‌های رقیب را مطالعه کنند. سایت‌هایی که به سرورهای اختصاصی با سرعت بالا، پیکر بندی و منابع بهینه مجهزند. این قبیل سرورها با وجود گران بودن، برای شما با ترافیک بازدید بالا، یک ضرورت به شمار می‌آیند. از طرفی دیگر، هاست‌های اشتراکی سایت شما را در کنار صدها سایت دیگر بر روی یک سرور قرار داده و منابع سرور چه سخت فزاری و چه نرم افزاری بین صدها سایت به اشتراک گذاشته می‌شود که در نتیجه منابع محدودتری به سایت شما تخصیص می‌یابد. بنا بر این مطمئن باشید که هاستینگ اختصاصی بهترین گزینه برای ثبات، عملکرد و ارتقا سایت شما می‌باشد. هرچند همیشه هم شرکت‌های هاستینگ مقصر نیستند. گاهی اوقات قدرت سرورهای هاست افت می‌کند. به هر حال بهترین روش آن است که از شرکتی خدمات هاستینگ خود را بگیرید که هم پشتیبانی خوبی داشته باشند و هم بتوانند در ساعات اوج شلوغی، ترافیک سایت را خوب مدیریت و کنترل کند.

  • بهینه سازی تصاویر

PhotoOptimization 300x125 افزایش سرعت بارگذاری سایت

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

  • فعال کردن فشرده سازی

ZipFile 300x300 افزایش سرعت بارگذاری سایت

همانند عکسها، فشرده سازی صفحات بزرگ وب نیز می‌تواند باعث کاهش پهنای باند صفحات و در نتیجه کاهش سرعت لود شود. بدین منظور کافی است فایل‌ها را قبل از آپلود به فرمت Gzip فشرده کنید. بنا بر ادعای یاهو، پس از این کار، سرعت لود تا ۷۰% کاهش می‌یابد. بهتر است که اولین منبع فشرده سازی را Gzip انتخاب کنید؛ زیرا ۹۰% کاربران اینترنت از مرورگرهایی بهره می‌جویند که از فرمت Gzip پشتیبانی می‌کنند. علاوه بر این، Gzip از سمت سرور نیز قابل دست رسی می‌باشد و می‌توان از طریق پوشه‌های  .htaccess, nginx.conf یا web.config آن را تنظیم کرد.

  •  ذخیره سازی مرورگر

BrowserCache 300x198 افزایش سرعت بارگذاری سایت

هنگامی که یک کاربر به سایت دست رسی پیدا می‌کند، سرور تصاویر و فایل‌های CSS، HTML و جاوا اسکریپت را به سیستم فرد می‌فرستد. این عناصر در هارد درایو کاربر به عنوان کش ذخیره می‌شوند تا اگر بار دیگر ساایت مورد نظر باز شد، به ارسال دوباره HTTP به سرور احتیاجی نباشد. به این ترتیب برای بازدیدهای بعدی تنها کافیست چند عنصر دانلود شوند و اگر داده‌ای بر روی سیستم شخص ذخیره نشود، بار گذاری سایت بسیار طولانی خواهد شد. طبق آمار سایت یاهو!، چهل تا شصت درصد از بازدید کنندگان سایت با کش خالی به سایت شما مراجعه می‌کنند. پس در هر صورت سایت شما می‌بایست برای مراجعه کنندگان تازه بهینه کنید. با فعال کردن قابلیت کش، تنها زمان بار گذاری برای دفعات بعدی کاهش پیدا می‌کند.

بهترین حالت این است که بتوان تمام منابعی که قابلیت ذخیره سازی دارند را حداقل یک هفته و ترجیحاً یک سال نگه داری کرد. نکته مهم بعدی برای سرعت بخشیدن به دانلود عناصر HTTP این است که هدرهای HTTP keep-alive را فعال کنیم.. به این ترتیب مر.رگر و سرور با یک اتصال می‌توانند اقدام به دریافت و ارسال چند فایل کنند. در واقع  هنگامی که کاربر از سایت شما بازدید می‌کند، اتصال سرور باز باقی می‌ماند و دیگر نیازی نیست تا برای هر در خواستیک اتصال جدید اتفاق بیفتد. برای فعال کردن keep-alive تنها کافیست چند خط کد ساده به .htaccess, nginx.cong یا web.config file اضافه کنید.

  • اسکریپت و CSS

Js Css 300x176 افزایش سرعت بارگذاری سایت

سازمان دهی جاوا اسکریپت و CSS سایت می‌تواند سرعت بارگذاری صفحات را بالا ببرد. اگر stylesheets در بالای سند قرار بگیرد، مرورگر از رندر گیری دوباره جلو گیری می‌کند و در نتیجه دیگر لازم نیست که عناصر صفحه دو باره ترسیم شوند. کافیست فایل‌های مرتبط را در قسمت پایین صفحه جای گذاری کنید تا بعد از محتوا لود گردند. بهتر است در ابتدا فایل‌های مربوط به ظاهر سایت بار گذاری شوند تا کاربر با دیدن یک سایت بی قالب، صفحه مرورگر را نبندد. سپس می‌تواند فایل‌هایی را که برای ارتباط گیری لازم هستند را قرار دهید و در انتها نیز APIهای خارجی بار گذاری می‌شوند. دلیل این ترتیب این است که تا کاربر محتوا و قالب سایت را نبیند، نه ارتباطی برقرار می‌کند و نه اقدامی.

  • پیکربندی CDN

CDN 300x169 افزایش سرعت بارگذاری سایت

بسیاری تصور می‌کنند که CDN نکته طلایی سرعت سایت می‌باشد. به همین دلیل در این مقاله اول موارد دیگر بررسی شد تا ثابت کنیم این طرز تفکر اشتباه است. CDN لزوماً و به تنهایی سرعت سایت را بالا نمی‌برد. سی دی ان می‌تواند بعد از اجرای روش‌های ذکر شده، عامل موثر بعدی در افزایش سرعت سایت باشد. CDNها، سرورهایی هستند که در مناطق و جاهای مختلف قرار گرفته‌اند و امکانات پایداری را به کاربر ارائه می‌دهند. هنگامی که شبکه در خواستی را دریافت می‌کند، داده‌ای که در نزدیک‌ترین سرور قرار گرفته سرعت لود صفحه را بالا می‌برد و در نتیجه، سرعت دانلود نیز بهبود پیدا می‌کند. محتوای مورد نظر بین چند سرور تقسیم می‌شود و به این ترتیب مسائلی که باعث تاخیر پاسخ گویی سرور می‌شوند، کاهش پیدا می‌کنند و بالطبع سرعت دانلود بالا می‌رود به علاوه، به دلیل پخش سرورها، up-time سایت هم افزایش پیدا می‌کند و اگر یکی از سرورها به هر دلیل نتواند به در خواست پاسخ بدهد، درخواست برای سرور نزدیک بعدی فرستاده می‌شود. این فایل‌های استاتیک به صورت جدا (و در بیشتر موارد در URLهای مختلف) از HTML مرکزی صفحه‌ای سرو شده‌اند. در نتیجه ساختمان صفحه شما به مرورگر فرستاده می‌شود. به این ترتیب نه تنها سرعت بار گذاری صفحه بالا می‌رود، بلکه اجازه نمایش صفحات قبل از لود کامل را نمی‌دهد. استفاده از CDN عملکرد سایتتان را در سر تا سر دنیا بهبود می‌بخشد و از این جهت ارزش سرمایه گذاری را دارد. باید به خاطر داشته باشید که سی در ان به تنهایی و به طور جادویی سرعت سایتتان را افزایش نمی‌دهد. استفاده از CDN  در کنار سایر نکات ذکر شده، باعث نتیجه گیری حداکثری خواهد شد.
حرف آخر
روش هایی که در این مقاله ارائه شدند واقعاً ارزشمند هستند و می‌توانند سایت وردپرسی شما را تا آخرین حد ممکن سریع کنند. اما نباید انتظار داشته باشید که فقط با کمک یکی از این روش‌ها سرعت لود صفحات سایتتان بالا برود. این تکنیک‌ها در کنار هم سرعت بار گذاری را افزایش می‌دهند. CDN  به تنهایی نمی‌تواند سرعت لود را بالا ببرد. ذخیره سازی مرورگر و فشرده سازی فایل‌های بزرگ می‌توانند منجر به دانلود سریع‌تر عناصر از سرور به کامپیوتر کاربر شود. ضمناً شما می‌توانید سرعت سایتتان را از طریق Google PageSpeed Insight  و یا GTmetix بررسی کنید و ببینید که صفحات سایت شما در مقیاس سرعت بارگذاری، اندازه صفحات و تعداد درخواست‌ها چطور عمل می‌کند. هدف سایت، ایجاد یک تجربه کاربری خوب است و اولین قدم برای نیل به این هدف  افزایش سرعت بار گذاری صفحات می‌باشد تا کاربر در اولین کلیک از سایت شما ناامید نشود.

]]> http://tarahan.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b1%d8%b9%d8%aa-%d8%a8%d8%a7%d8%b1%da%af%d8%b0%d8%a7%d8%b1%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 انواع طراحی سایت بر اساس رابط کاربری وب – گرافیک http://tarahan.com/%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d8%b3%d8%a7%d8%b3-%d8%b1%d8%a7%d8%a8%d8%b7-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%db%8c-%da%af%d8%b1%d8%a7%d9%81/ http://tarahan.com/%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d8%b3%d8%a7%d8%b3-%d8%b1%d8%a7%d8%a8%d8%b7-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%db%8c-%da%af%d8%b1%d8%a7%d9%81/#respond Sat, 29 Oct 2016 08:42:22 +0000 http://tarahan.com/?p=6548 […]]]>  یکی از مهم ترین فاکتورهایی که بازدیدکننده را به خود جذب می کند، ظاهر و طراحی سایت است، اما همیشه تمام بازدیدکنندگان و مشتریان سایت‌ها دارای سلیقه یکسان نیستند. یک سایت می‌تواند از نظر گروهی از بازدیدکنندگان بسیار خوب و حرفه‌ای به نظر رسد و از طرف دیگران بسیار بد و ابتدایی. طراح سایت خوب، وب سایت را با سلیقه خود نمی‌سازد بلکه بنا بر گروه مخاطبین سایت(بازدیدکنندگان) و آن‌چه مدیر سایت تمایل دارد، طراحی می‌کند. به عنوان مثال برای یک سایت حقوقی نمی‌توان از طرح‌های فانتزی استفاده کرد. زیرا این کار بازدیدکننده را کودک تلقی می‌کند و به سایت جنبه شوخی می‌دهد.

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

۱. طراحی سایت نا منظم: که امروزه یکی از پر طرفدارترین طراحی‌های جدید دنیای گرافیست می‌باشد، به سایت‌هایی گفته می‌شود که از خصوصیات زیر برخوردارند:

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

این دست سایت‌ها برای هنرمندان، افراد خلاق و دوست داران طراحی‌های مدرن و متفاوت مناسب است و برخی از پزشکان، مهندسان و کسانی که با خط کش و نظم ساخت انسان، میانه خوبی دارند اصلا آن را نمی‌پسندند.

FlatWebDesign 300x200 انواع طراحی سایت بر اساس رابط کاربری وب گرافیک

طراحی سایت

۲. طراحی سایت خلوت: این نوع طراحی سایت، در ظاهر ساده هستند اما تفکری در پی ساخت آن‌ها نهفته است. استفاده از المان‌های کم و گرافیکی و استفاده از دو یا سه رنگ در طراحی، به آن‌ها ظاهری متفاوتی داده است و برخلاف دسته اول، به تمیزی معروفند. از نظر طراحی کاملاٌمتمایز، حرفه ای و مدرن هستند. همچنین پیام “صاحب این سایت مشتاق است” و ” صاحب این سایت قابل اعتماد است” را به بازدیدکننده القا می‌کند.  این گونه سایت‌ها برای همه مناسب است غیر از کسانی که دوست ندارند تفاوت شایانی با بقیه داشته باشند. این تفاوت آن‌ها را می‌ترساند و سایت‌های استاندارد را می‌پسندند.

۳. طراحی سایت پر المان: این طراحی طرفدارانش در ایران بیشتر از طراحی سایت دسته‌های دیگر می‌باشد. موضوع سایت تعیین می‌کند وب سایت از چه المان‌ها و رنگ‌هایی تشکیل شده باشد. مثلاً اگر موضوع سایت شرقی،‌ سنتی هنری و ایرانی باشد از انواع المان‌های بته جقه، فلورال یا انواع گلیم و بافت آن در سایت استفاده می‌شود. یا اگر موضوع سایت کودک یا فضایی فانتزی باشد، آیکون‌های مختلف در جای جای بک گراند و هدر به کار می‌رود. این سایت‌ها اگر به درستی طراحی شوند، فضایی گرم و پر هیجان را ایجاد می‌کنند که بیان گر  پشتکار، خونگرمی و مشغله صاحب سایت است.

۴. طراحی سایت ساده و استاندارد: این طراحی را خوب می‌شناسید. اغلب سایت‌هایی که می‌بینید از این نوع طراحی بهره برده‌اند. هدری مستطیلی در بالای صفحه، منو در زیر هدر یا به صورت عمودی، همه قسمت‌ها در سایت قاب و محدوده دارند، معمولاً از رنگ‌های رایج خاکستری، سفید برای بک گراند با طرح‌های خط یا شیار استفاده می‌شود. هدر‌ها شامل چند عکس هستند. البته  این طرح‌ها می‌توانند در کمال سادگی زیبا هم باشند و با تلفیق درست رنگ و عکس هدر ، حسی حرفه‌ای ایجاد کنند. اما ظاهر این گونه سایت‌ها یاد بازدیدکننده نمی‌ماند که برای برخی از صاحبان سایت، اصلاً مهم نیست و به مسائل دیگری همچون محتوای با ارزش اهمیت می‌دهند، که درست هم هست. این سایت‌ها برای شرکت‌ها، تجار ، وکلا و مشاغل جدی بسیار مناسب هستند .

]]> http://tarahan.com/%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d8%b3%d8%a7%d8%b3-%d8%b1%d8%a7%d8%a8%d8%b7-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%db%8c-%da%af%d8%b1%d8%a7%d9%81/feed/ 0 چطور یک وردپرس نفوذ ناپذیر داشته باشیم؟ http://tarahan.com/%da%86%d8%b7%d9%88%d8%b1-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d9%86%d9%81%d9%88%d8%b0-%d9%86%d8%a7%d9%be%d8%b0%db%8c%d8%b1-%d8%af%d8%a7%d8%b4%d8%aa%d9%87-%d8%a8%d8%a7%d8%b4%db%8c%d9%85%d8%9f/ http://tarahan.com/%da%86%d8%b7%d9%88%d8%b1-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d9%86%d9%81%d9%88%d8%b0-%d9%86%d8%a7%d9%be%d8%b0%db%8c%d8%b1-%d8%af%d8%a7%d8%b4%d8%aa%d9%87-%d8%a8%d8%a7%d8%b4%db%8c%d9%85%d8%9f/#respond Wed, 21 Sep 2016 11:24:47 +0000 http://tarahan.com/?p=6478 […]]]> وردپرس به عنوان محبوب‌ترین CMS استفاده شده برای طراحی سایت، مشکلات امنیتی دارد که همه ما از آن‌ها آگاه هستیم. این مورد در نسخه‌های قدیمی‌تر آن بیشتر به چشم می‌خورد و برای رفع آن بهتر است که همیشه وردپرس را به آخرین نسخه  موجود به روز رسانی نماییم. این مشکلات گاهی حتی در نسخه‌های جدید وردپرس نیز به چشم می‌خورند. در این مقاله سعی خواهیم کرد تا راه‌های اصلی شناسایی نقاط آسیب پذیر وردپرس را توضیح دهیم.

حدس زدن رمز عبور ادمین

خیلی از مدیران وب سایت با اسکریپت وردپرس، رمز عبور ساده‌ای را برای کاربر ادمین وردپرس انتخاب می‌کنند. صفحه ورود به بخش ادمین معمولاً در مسیر /wp-login.php قرار دارد. ابزارهایی وجود دارند که می‌توانند به صورت خودکار به کمک یک دیکشنری حاوی رمز عبور، یا همان حملات Bruteforce برای یافتن رمز عبور ادمین وردپرس تلاش نمایند.

وارد کردن Arbitrary Strings

بیایید نگاهی بیاندازیم به کادر جست و جو که در آن می‌توانیم دنبال یه string بگردیم. در تصویر زیر می‌بینید که ما به دنبال searchstring گشته‌ایم و هیچ نتیجه‌ای پیدا نکرده‌ایم.

 wp security 1 300x77 چطور یک وردپرس نفوذ ناپذیر داشته باشیم؟

حالا ببینیم چه اتفاقی می افتد اگر ما به دنبال چیزی بگردیم که کاراکترهای غیر مجاز هم داشته باشد. کاراکترهایی مانند، چپ/راست، آپاسترف و غیره.

بگذارید یک <b>  را جستجو کنیم و نتیجه را ببینیم.

wp security 2 300x77 چطور یک وردپرس نفوذ ناپذیر داشته باشیم؟

وقتی به دو تصویر جست و جو نگاه می‌کنید در ابتدا تفاوتی مشاهده نمی‌کنید. اما اگر با دقت نگاه کنید متوجه می‌شوید که جمله  “The search didn’t find any search page that matched the search query.” با خط بولد نوشته شده است. چرا این گونه است؟ دلیل آن است که ما به دنبال <b> گشته‌ایم که داخل یک پوشش قرار نگرفته و مستقیماً داخل کد html قرار دارد. دلیل این مورد نگذاشتن درست ورودی کاربر، داخل یک حصار، توسط برنامه نویس است. از آن جایی که ما کاراکتر مخصوص گذاشته‌ایم، ورودی کاربر مستقیماً داخل اچ تی ام ال قرار گرفته و به کاربر بازگردانده شده است.

کاراکتر <b> داخل زبان html به معنی bold شدن یک خط از ابتدا تا انتها، توسط مرورگر وب است. در ابتدا این به نظر یک مشکل امنیتی بزرگ، نمی‌آید. اما ما راهی یافته‌ایم که بتوانیم کد را مستقیم داخل کد HTML یک صفحه قرار دهیم. این یعنی ما می‌توانیم یک کد جاوا اسکریپت بنویسیم و آن را جست و جو کنیم. کد ما احتمالاً با جست و جو، مستقیماً بر روی سیستم میزبان سایت، اجرا خواهد شد.

حالا مهاجم می‌تواند یک لینک مخصوص ایجاد کند که شامل کد جاوا اسکریپت مخرب باشد و آن را به سمت قربانی ارسال کند. وقتی کاربر برروی لینک کلیک می‌کند، کد جاوا اسکریپت مخرب اجرا شده و می‌تواند کوکی‌های بخش  ارتباطی کاربر را سرقت کند که می‌تواند به مهاجم امکان ورود با نام کاربر را داده و در ادامه، اکانت کاربر را در دست بگیرد.

این مورد همچنین در صورتی که وب سایت، داده‌ها را مستقیماً داخل کوئری SQL ذخیره می‌کند، می‌تواند مشکل امنیتی برای دیتابیس سرور ایجاد کند. اگر این اتفاق بیافتد، ما می‌توانیم به کل دیتابیس مورد استفاده  وب سایت دسترسی داشته باشیم.

همیشه سعی نمایید که دسترسی عمومی به ایندکس‌ها را در هر جایی که ممکن است مسدود کنید. اگر وب سرور آپاچی یا سیستم دیگری که از فایل .htaccess استفاده می‌کند، استفاده می‌کنید، این کار آسان است. فایل .htaccess را داخل فولدر اصلی سایت خود بیابید. منظور فولدری است که فایل index.php  شما آن جا قرار دارد. دستور   Options –Indexes  را داخل فایل وارد نموده و ذخیره نمایید.

در صورتی که وب سرور شما برای کار با فایل‌های PHP در زمانی با مشکل مواجه بوده است، بسیار مهم است که فولدرهایی را که تنها سرور به آن‌ها دسترسی دارد را مسدود نمایید. اگر کد PHP بر روی مرورگر کاربر شما به جای صفحه وب مشاهده گردد ، آن‌ها ممکن است اطلاعات دیتابیس و یا اطلاعات دیگری درباره  PHP/MySQL شما بیابند. فولدر wp-includes مهم‌ترین فولدری است که می‌بایست مسدود شود. برای انجام این کار در فایل .htaccess دستور زیر را وارد نمایید.

 RewriteRule ^(wp-includes)\/.*$ ./ [NC,R=301,L]

اگر زیرفولدری برای wp-include وجود دارد، کد زیر را برای هر کدام از آن‌ها داخل فایل .htaccess وارد نمایید.

RewriteRule ^(wp-includes|subdirectory-name-here)\/.*$ ./ [NC,R=301,L]

پلاگین WP-DB Manager برای تهیه بک آپ از کل سایت وردپرس شما بسیار مناسب است. این پلاگین همچنین آسیب پذیری‌های وردپرس را به شما اطلاع داده و بخش‌های دیتابیس را که به صورت پابلیک قابل مشاهده است را مشخص می‌کند. همیشه از سایت خود بک آپ تهیه نمایید تا در صورت بروز بدترین حالت نیز بتوانید سایت را به آسانی ریستور نمایید.

دیتابیس هک گوگل

ابتدا می‌بایست نگاهی به دیتابیس‌هایی مانند (GHDB(Google Hacking DataBase بیاندازیم و به دنبال واژه  wordpress یا چیزی مشابه آن بگردیم. با این کار چند کوئری مانند تصویر زیر مشاهده خواهیم کرد.

wp security 3 300x98 چطور یک وردپرس نفوذ ناپذیر داشته باشیم؟

شما سه ستون در تصویر بالا مشاهده می‌کنید. ستون اول ستون Data است که اطلاعات کوئری جست و جوهای ذخیره شده در در GHDB نمایش می‌دهد. بعد از آن ستون Title است که کوئری‌هایی را که ما در واقع می‌بایست داخل سرچ گوگل قرار داده تا به آسیب پذیری وردپرس برسیم را نشان می‌دهد. بعد از آن Summery یا خلاصه است که اطلاعات کافی برای جست و جوی ستون عنوان در اینترنت را به ما می‌دهد.

مثال اول به دنبال فایل‌های حاوی اطلاعات می‌گردد و از یک کوئری جست و جو filetype:avastlic  استفاده می‌کند. این مستقیماً به به وردپرس مربوط نیست اما کوئری از یک وبلاگ وردپرس گرفته شده است. یک ورودی کاملاً مرتبط با وردپرس در زیر نشان داده شده است که به دنبال فایل‌هایی می‌گردد که شامل رمز عبور هستند.

کوئری زیر به دنبال فایل‌های با پسوند SQL که شامل کلمه  wp-content/backup در آدرس باشند، می‌گردد.

filetype:sql inurl:wp-content/backup-*

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

wp security 4 300x186 چطور یک وردپرس نفوذ ناپذیر داشته باشیم؟

گوگل ۷.۱۷۰ نتیجه پیدا کرده است که ما می‌توانیم برای یافتن رمز عبور آن‌ها را بررسی کنیم. اگر در نتایج آن دیتابیس‌های SQL جست و جو نماییم، به احتمال زیاد، چند نام کاربری و رمز عبور خواهیم یافت.

حال چه کاری می‌بایست انجام دهیم؟

وقتی برنامه‌ای را به یک زبان برنامه نویسی می‌نویسیم، می‌بایست از خود بپرسیم، جه مشکلات امنیتی بیشتر در زمان استفاده از این زمان بروز می‌کند. بنابراین اگر ما از PHP استفاده می‌کنیم، احتمالاً موارد SQL injection و یا XSS flaw وجود خواهند داشت. اما اگر با زبان برنامه نویسی C/C++  کار می‌کنیم، احتمالاً با buffer overflows و format strings رو به رو خواهیم بود.

خوب حالا چه کاری برای مقابله با آن می‌توانیم انجام دهیم؟ اول از همه می‌بایست اطلاعات کلی در مورد این مشکل امنیتی داشته باشیم. ( بدون در نظر گرفتن این که آیا ما کد آسیب پذیر نوشته‌ایم یا نه ). روش اصلی برای مقابله با حملات به این صورت است: هرگز به چیزی را که از سمت کاربر می‌آید اعتماد نکنید. حتی اگر دیتا ورودی در حالت عادی از سمت کاربر نمی‌آید ( مانند یک فرم نامرئی)، این احتمالاً وجود دارد که کاربری بتواند آن را تغییر دهد. این به ما یک راهنمای خوب در زمان توسعه دادن یک برنامه می‌دهد.

در ادامه می‌بایست از خودمان بپرسیم: کدام داده‌های ورودی می‌توانند از سمت کاربر بیایند؟ جواب این سوال آن قدر که به نظر می‌رسد، آسان نیست. بعضی وقت‌ها در واقع جواب آن به خاطر فراموش شدن امکانت مخفی که فراموش شده‌اند، بسیار سخت است.

مهم‌ترین کاری که می‌توان انجام داد، بررسی تمام مسیرهای ورودی برای کاراکترهای غیر مجاز است.

در پایان، مهم نیست که تمام ورودی را بررسی و حفاظت کنیم. چون احتمالاً به دلیل این که نمی‌دانیم تمام ورودی‌های ممکن چه می‌توانند باشند، نمی‌توانیم به صورت قطعی این کار را انجام دهیم. برای همین در صورتی که بتوانیم همه مقدارهای ورودی که می‌دانیم می‌توانند از سمت یک کاربر ارسال شوند، را بررسی نماییم، در واقع توانسته‌ایم به صورت خوبی جلوی حملات احتمالی را بگیریم.

افزونه هایی که توصیه می کنیم

افزونه‌های وردپرس که به شما توصیه می‌کنیم نصب نمایید، در صورتی که به خوبی استفاده شوند، می‌توانند یک سایت وردپرس را به خوبی مقاوم نمایند.

۱- Exploit Scanner

هر چند وقت یک بار، این افزونه را اجرا کنید تا فعالیت‌های مخرب را مشخص کند. این افزونه مستقیماً مشکل را رفع نمی‌کند، اما یک راهنمای رفع مشکل کامل برای شما ارائه می‌کند. اگر هر زمانی به هک شدن سایت خود شک دارید، وقت اجرای این افزونه است.

۲- WP security Scan

همراه با Exploit scanner شما می‌توانید، این افزونه را استفاده کنید. این افزونه نه تنها دنبال مشکلات امنیتی می‌گردد، بلکه راه‌های رفع آن را به صورت دقیق ارائه می‌کند.

۳- Limit Login Attempts

این افزونه را تنظیم نمایید تا جلوی حملات Bruteforce را بگیرید. با این پلاگین می‌توانید، ماکزیمم تعداد تلاش برای ورود را مشخص نموده و همچنین زمانی که امکان ورود برای آن آی پی قفل می‌شود را تعیین نمایید.

۴- Block Bad Queries ( مسدود کردن کوئری‌های بد )

Block Bad Queries افزونه‌ای است که تلاش خواهد کرد، کوئری‌های مخرب را مسدود کند. این افزونه در کوئری‌ها به دنبال String‌های بلند مشکوک می‌گردد.

۵- آنتی ویروس

یک محافظ ضد بدافزار می‌تواند بر روی کل سایت شما به کمک افزونه Antivirus قرار گیرد. این افزونه به دنبال ویروس‌ها، کرم‌ها، روت کیت‌ها و انواع دیگر بدافزار می‌گردد. همیشه دقت نمایید که آن را به روز رسانی کنید.

]]> http://tarahan.com/%da%86%d8%b7%d9%88%d8%b1-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-%d9%86%d9%81%d9%88%d8%b0-%d9%86%d8%a7%d9%be%d8%b0%db%8c%d8%b1-%d8%af%d8%a7%d8%b4%d8%aa%d9%87-%d8%a8%d8%a7%d8%b4%db%8c%d9%85%d8%9f/feed/ 0 کدام شرکت طراحی سایت مناسب است؟ http://tarahan.com/%da%a9%d8%af%d8%a7%d9%85-%d8%b4%d8%b1%da%a9%d8%aa-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%86%d8%a7%d8%b3%d8%a8-%d8%a7%d8%b3%d8%aa%d8%9f/ http://tarahan.com/%da%a9%d8%af%d8%a7%d9%85-%d8%b4%d8%b1%da%a9%d8%aa-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%86%d8%a7%d8%b3%d8%a8-%d8%a7%d8%b3%d8%aa%d8%9f/#respond Wed, 21 Sep 2016 08:14:47 +0000 http://tarahan.com/?p=6470 […]]]> کسب و کار شما هر چه که باشد برای معرفی و هدایت مشتری به سمت آن داشتن، طراحی سایت حرفه‌ای یک مسئله ضروری است، چرا که مردم پیش از هر جایی آن چه نیاز دارند را در اینترنت جست و جو می‌کنند. اما یک وب سایت حرفه‌ای چه تاثیری بر کسب و کار شما خواهد داشت؟ و برای طراحی آن به چه نکاتی باید توجه کرد؟

‌در ادامه با اشاره به نکاتی به این دو سوال پاسخ خواهیم داد:

برای طراحی سایت حرفه‌ای به اندازه کسب و کار خود توجه کنید

در واقع امروز با توجه به گسترش روز افزون دسترسی مردم دنیا به اینترنت کسب و کارهای کوچک زیادی با سرمایه اولیه اندک در حال شکل گیری هستند، بنابراین باید با توجه به بودجه‌ای که دارید به سراغ شرکت‌های طراحی سایت بروید.

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

Web Design Image Page 300x200 کدام شرکت طراحی سایت مناسب است؟

نمونه‌های زیادی از شرکت‌های طراح حرفه‌ای وجود دارد که با یک جست و جوی دقیق می‌توانید به آن‌ها دست یابید.

به یاد داشته باشید شما آنقدر پول دار نیستید که بتوانید اشتباه کنید.

برای طراحی سایت حرفه‌ای به سراغ شرکت‌هایی بروید که پیشینه و سوابق قبلی آن‌ها مشخص است

برای مقابله با مساله‌ای که در بالا مطرح شد رزومه شرکت طراحی سایت را بررسی کنید. ببینید که آن ها برای مشتریان قبلی خود چه سایت هایی را با چه قیمتی طراحی کرده اند و مطمئن شوید پنل و قالبی کارآمد، پایدار و ایمن و سریع و به صرفه برای شما طراحی می‌کنند.

به سراغ شرکت‌هایی بروید که با توجه به مبانی سئو به طراحی سایت شما بپردازند

هر وب سایتی که به سوی تجارت و بازرگانی حرکت می‌کند، باید صفحات وب خود راب رای موتورهای جستجو بهینه سازی کند. SEO یعنی تولید کردن صفحات وبی که برای موتورهای جست و جو جالب و مهم هستند.

]]> http://tarahan.com/%da%a9%d8%af%d8%a7%d9%85-%d8%b4%d8%b1%da%a9%d8%aa-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%86%d8%a7%d8%b3%d8%a8-%d8%a7%d8%b3%d8%aa%d8%9f/feed/ 0 طراحی مسطح http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%85%d8%b3%d8%b7%d8%ad/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%85%d8%b3%d8%b7%d8%ad/#respond Tue, 12 Apr 2016 05:36:15 +0000 http://tarahan.com/?p=6362 […]]]> در گذشته، طراحان سایت برای نشان دادن مهارت هایشان، بر نمایش نمونه کارهای طراحی بصورت تصاویر و انیمیشن های پر زرق و برق تمرکز ویژه ای داشتند تا بدین ترتیب بازدید کنندگان و کاربران خود را متحیر سازند. پس از آن همه طراحان به طراحی Skeuomorphic روی آوردند که این روش با ایجاد تاثیرات نور و سایر المان ها تلاش بر واقعی جلوه دادن اشیا و متون می نماید. این روش قدیمی سال های متمادی رایج ترین روش برای طراحی به شمار می آمد و طراحان تلاش می کردند تا با استفاده از این روش، به کار و دانش خود جلوه خاصی بخشند. امروزه، در مقابل طراحی Skeuomorphic، روش دیگری رواج دارد که طراحی مسطح نامیده می شود. این روش در مقابل تمام تکنیک های طراحی مصنوعی قرار دارد. طراحی مسطح، سبکی از طراحی است که تمرکز اصلیش روی کاربر بوده و بر مبنای زیبایی شناختی جلوه ای کم نظیر به طراحی ها می دهد.

livetiles طراحی مسطح

ویندوز ۸ از اولین طراحی های مسطح می باشد.

طراحی مسطح چیست؟

طراحی مسطح یک طراحی مینیمال است که تاکیدش بر قابلیت استفاده آن است. از ویژگی های بارز آن می توان به رنگ های درخشان، تصاویر دو بعدی مسطح و فضای خالی اشاره نمود.

مایکروسافت اولین شرکتی بود که از این سبک طراحی استفاده کرد و بدین ترتیب طراحی Skeuomorphic اپل کنار گذاشته شد. بعنوان مثال در طراحی نرم افزار تقویم تصاویر ساده و به شکل آیکون بکار گرفته می شوند.

آیا ساده گرایی یا مینیمالیسم خسته کننده است؟

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

درک آسان

تصاویر ساده سریع تر از طرح های پیچیده و پر از جزئیات پیام را منتقل می کنند. تصاویری چون آیکون ها، مقاصد یکسان و جهانی را نشان می دهند و درنتیجه همه افراد به راحتی قادر به درک آن ها هستند.

در این زمینه، به راحتی می توان تفاوت بین طراحی مسطح و Skeuomorphic را درک کرد. توجه داشته باشید که چگونه بلوک های رنگی بیشتر جلب توجه می کنند و مفاهیم را به سادگی انتقال می دهند.

چگونه می توان یک طراحی مسطح داشت؟

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

  • رنگ های تند و یک دست جنبه تاکیدی به جزئیات می دهند.
  • تایپوگرافی sans serif مکمل خوبی برای یک طراحی مسطح است.
  • متن باید دقیق و کوتاه باشد.
  • المان های UI مانند دکمه ها و لینگ ها باید قابل توجه و واضح باشند.

 همه چیز باید بگونه ای در طراحی بکار برده شود که سایت را کاربردی نشان داده و طراحی مسطح آن را بخوبی نمایش دهد.

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%85%d8%b3%d8%b7%d8%ad/feed/ 0 برنامه نویسی چیست؟ (بخش دوم) http://tarahan.com/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-2/ http://tarahan.com/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-2/#respond Sun, 10 Apr 2016 10:06:39 +0000 http://tarahan.com/?p=5972 […]]]> در بخش اول، به توضیح مختصری درمورد مفاهیم برنامه نویسی پرداختیم و یکی از روش های برنامه نویسی یعنی OOP را معرفی کردیم. در ادامه چگونگی کار کردن با این برنامه را توضیح می دهیم.

در مقاله قبلی آورده شد که OOP که یکی از سبک های برنامه نویسی است، برنامه را به اشیای مجزا تقسیم می کند و هر یک از این اشیا خود از المان هایی به نام توابع تشکیل می شوند.

در ابتدا نمونه ای از یکی از این توابع را نشان می دهیم.

یکی از توابع اشیای پنجره، کادر “اخطار یا alert” است. در ادامه چگونگی استفاده از تابع اخطار آورده شده است:

Untitled برنامه نویسی چیست؟ (بخش دوم)

همین یک خط ساده کارهای زیادی انجام می دهد. با درک خوب از این همین خط ساده، می توانید به خوبی راه خود را بعنوان یک برنامه نویس در جاوااسکریپت آغاز نمایید. از آنجایی که در اینجا برنامه نویسی برای مرورگر وب انجام می دهیم، تمام کدهای برنامه نویسی برای مرورگر در نظر گرفته شده اند.

دستور اولین خط این کد به مرورگر این است که می خواهیم از شی پنجره استفاده نماییم. این کار را با تایپ کلمه “window” آغاز می کنیم. در حال حاضر مرورگر می داند که می خواهیم از یک پنجره استفاده نماییم.مانند تمامی اشیا، شی پنجره نیز توابع مخصوص به خود را دارد. بنابراین، برای اینکه مرورگر بداند از چه تابعی می خواهیم استفاده نماییم آن را نامگذاری می کنیم ودر اینجا کلمه “alert” را می نویسیم. در نتیجه، مشخص می شود که می خواهیم از پنجره (کاذر) اخطار استفاده نماییم.

همانطور که مشاهده می شود میان دو کلمه “پنجره” و “اخطار” یک نقطه قرار دارد که فهم عملکردها را برای مرورگر آسان می نماید. به عبارت دیگر، این نقطه نشان می دهد که کلمه دوم یک تابع از اشیای پنجره است. چنانچه از نقطه استفاده نمی شد، مرورگر نمی توانست درک درستی از دستور داشته باشد. در توابع، اینجور نقطه ها بسیار مورد استفاده هستند.

علائم و متون توابع دستوری در برنامه نویسی

بخش بعدی کد به آسانی قابل درک است:

23 برنامه نویسی چیست؟ (بخش دوم)

در مثال بالا، از آنجایی که متن داخل علامت نقل قول (“ ”) قرار گرفته است در نتیجه مرورگر متوجه می شود که این یک متن است و هیچ دستور خاصی نباید صورت بگیرد.

در جاوااسکریپت برای انتهای هر تابع، به دو پرانتز نیاز داریم. در این مثال، برای دستور اخطار می نویسیم: ()alert. با گذاشتن دو پرانتز، مرورگر متوجه می شود که این یک تابع است. بدین ترتیب، برنامه نویس هم می تواند به راحتی محل توابع را پیدا کند.

 در زبان های متعدد برنامه نویسی بویژه جاوااسکریپت، باید به نحوی به کامپیوتر نشان دهیم که کد برنامه نویسی به اتمام رسیده است. به این منظور، از علامت (( ; )) استفاده می کنیم. درنتیجه، وقتی کامپیوتر با این علامت روبه رو می شود متوجه می شود که کد به پایان رسیده است.

 منبع: www.how-to-build-websites.com

 

]]> http://tarahan.com/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-2/feed/ 0 جاوااسکریپت چیست؟ http://tarahan.com/%d8%ac%d8%a7%d9%88%d8%a7%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%da%86%db%8c%d8%b3%d8%aa-%d8%9f/ http://tarahan.com/%d8%ac%d8%a7%d9%88%d8%a7%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%da%86%db%8c%d8%b3%d8%aa-%d8%9f/#respond Wed, 09 Mar 2016 11:59:23 +0000 http://tarahan.com/?p=6333 […]]]> یکی از اشتباهات رایج در مقوله برنامه نویسی یکسان دانستن جاوا و جاوااسکریپت است. هر دو زبان برنامه نویسی هستند ولی می توان گفت تنها شباهت میان این دو اشتراک کلمه “جاوا” در نام هر دو است. در این سری مقاله ها، سعی بر این است که به معرفی جاوا و جاوااسکریپت پرداخته و تفاوت های میان این دو را بررسی کنیم.

جاوااسکریپت چیست؟

جاوااسکریپت یک زبان اسکریپت سمت کاربر (Client-side) است که شی‌گرا (Object-Oriented Programming یا OOP) بوده، ساختاری مشابه زبان جاوا و ++C دارد و از محبوبیت بالایی برخوردار است. این بدین معناست که کد جاوااسکریپت در صفحه HTML نوشته می شود. زمانی که کاربری درخواست یک صفحه HTML با جاوااسکریپت دارد، اسکریپت به مرورگر ارسال می شود و بعد مرورگر عملیاتی روی آن انجام می دهد.

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

logo javascript جاوااسکریپت چیست؟

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

مغایرت های مرورگر

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

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

برای حل این مشکلات باید مورد به مورد پیش رفته و اقدام به مرتفع نمودن مغایرت ها کرد.

نسخه های جاوااسکریپت

۱.۰: Netscape 2

۱.۱: Netscape 3 و Explorer 3 (نسخه اکسپلورر پشتیبانی خوبی از جاوااسکریپت ندارد).

۱.۲: نسخه اولیه شماره ۴ مرورگرها

۱.۳: نسخه پایانی شماره ۴ و نسخه ۵ مرورگرها

۱.۴: این نسخه برای مرورگرها قابل استفاده نیست و تنها برای سرورهای Netscape بکار می رود.

۱.۵: نسخه فعلی

۲.۰: نسخه آتی که درحال حاضر در دستان برندن ایچ و سایر همکارانش در حال توسعه است.

 منبع: www.quirksmode.org

 

]]> http://tarahan.com/%d8%ac%d8%a7%d9%88%d8%a7%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%da%86%db%8c%d8%b3%d8%aa-%d8%9f/feed/ 0 جاوا چیست؟ http://tarahan.com/%d8%ac%d8%a7%d9%88%d8%a7-%da%86%db%8c%d8%b3%d8%aa-%d8%9f/ http://tarahan.com/%d8%ac%d8%a7%d9%88%d8%a7-%da%86%db%8c%d8%b3%d8%aa-%d8%9f/#respond Wed, 09 Mar 2016 10:10:40 +0000 http://tarahan.com/?p=6327 […]]]> یکی از اشتباهات رایج در مقوله برنامه نویسی یکسان دانستن جاوا و جاوااسکریپت است. هر دو زبان برنامه نویسی هستند ولی می توان گفت تنها شباهت میان این دو اشتراک کلمه “جاوا” در نام هر دو است. در این سری مقاله ها، سعی بر این است که به معرفی جاوا و جاوااسکریپت پرداخته و تفاوت های میان این دو را بررسی کنیم.

جاوا چیست؟

جاوا یک زبان برنامه نویسی است که از زبان C مشتق شده و ساختاری مشابه با C و ++C دارد. بطور خلاصه، از ویژگی های بارز جاوا می توان به موارد زیر اشاره کرد:

۱) جاوا یک زبان ساده است: اگرچه جاوا بعد از C و ++C شکل گرفته است اما پیچیدگی های آن ها را ندارد. یکی از ویژگی هایی برای جاوا لازم است اما در ++C/C دیده نمی شود garbage-collection facility یا امکان پاک سازی است که بطور خودکار اشیاء را پاک می کند.

۲) جاوا یک زبان شی گراء است: تمرکز شی گرایانه جاوا به برنامه نویسان کمک می کند تا از جاوا برای حل مشکلات استفاده نمایند و این امر با یک زبان ساختاربندی شده مانند C کاملاً متفاوت است.

۳) جاوا یک زبان مطمئن است: برنامه های جاوا در محیط های شبکه ای/گسترده مورد استفاده قرار می گیرند. ارآنجایی که برنامه های جاوا قابلیت انتقال دارند و بر پلتفرم های متعدد شبکه اجرا می شوند، این امر حائز اهمیت است که این پلتفرم ها در برابر کدهای مخرب محافظت شده و از گسترش ویروس ها، دزدی اطلاعات شخصی یا انجام اقدامات مخرب جلوگیری شود. در همین راستا، جاوا باید از ویژگی های امنیتی از قبیل مدل امنیتی sandbox و کدگذاری بهره مند باشد. با وجود این مشخصات، از ورود ویروس ها و کدهای خطرناک جلوگیری می شود.

۴) جاوا یک زبان معماری خنثی است: شبکه ها، بوسیله معماری های مختلف پلتفرم ها را به هم متصل می سازند و این معماری ها بر اساس سیستم عامل ها و میکروپردازشگرهای متعدد می باشند. نمی توان از جاوا انتظار ایجاد دستورالعمل ها با پلتفرم ویژه را داشت که بعدها این دستورات توسط تمامی پلتفرم ها قابل فهم باشند. درعوض، جاوا دستورالعمل های مستقل از بایت کد را ایجاد می کنند که برای هر پلتفرمی قابل فهم و تفسیر است.

۵) جاوا یک زبان پرتابل یا قابل حمل است: معماری خنثی جاوا منجر به قابل حمل بودن آن نیز می شود. علاوه براین، مجموعه جاوا در قابل حمل بودن آن نیز نقش دارد. قابلیت حمل جاوا بدین معناست که بایت کدهای جاوا بر هر نرم افزار قابل اجراست.

۶) جاوا یک زبان چند ریسه ای است: برای اجرای برنامه هایی که باید چند کار را با هم انجام دهند جاوا بخوبی از مفهوم اجرای ریسه ای پشتیبانی می کند.

Java logo 008 جاوا چیست؟

نسخه های جاوا

پلتفرم جاوا، نسخه استاندارد (Standard Edition یا Java SE)

این نسخه برای توسعه برنامه های Client-side یا سمت کاربر می باشد که در دسکتاپ اجرا می شوند یا برای اپلت ها (Applet) که در مرورگرهای وب اجرا می شوند.

پلتفرم جاوا، نسخه سازمانی (Enterprise Edition یا Java EE)

این نسخه برای توسعه برنامه های سازمانی و با کاربری زیاد بکار می رود. برنامه های سمت سرور یا Server-side که اصطلاحاً سرولت نامیده می شوند مشابه اپلت ها بوده که بجای کاربر، بر سرور اجرا می شوند.

پلتفرم جاوا، نسخه میکرو (Micro Edition یا Java ME)

این نسخه برای توسعه MIDlet ها، بکار می رود که برنامه های جاوا مربوط به وسایل پرتابل را اجرا می کند. علاوه براین، نسخه ME برای Xlet ها هم کاربرد دارد.

منبع: www.javaworld.com

]]> http://tarahan.com/%d8%ac%d8%a7%d9%88%d8%a7-%da%86%db%8c%d8%b3%d8%aa-%d8%9f/feed/ 0 انواع سایت: سایت استاتیک http://tarahan.com/%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d8%b3%d8%aa%d8%a7%d8%aa%db%8c%da%a9/ http://tarahan.com/%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d8%b3%d8%aa%d8%a7%d8%aa%db%8c%da%a9/#respond Tue, 08 Mar 2016 14:39:27 +0000 http://tarahan.com/?p=6309 […]]]> چنانچه در نظر دارید تا سرعت سایت خود را افزایش دهید ابتدا باید بدانید سایت شما از چه نوعی است. آیا سایتی داینامیک است یا استاتیک؟ جهت مقایسه مختصر سایت استاتیک و داینامیک می توان گفت که سایت های داینامیک به منابع سرور زیادی نیاز دارند؛ درنتیجه، از سرعت پایین تری برخوردارند. ولی در زمان بروز‌رسانی از انعطاف پذیری بالایی برخوردارند. این درحالی است که وب سایت های استاتیک بطور ذاتی سریع تر هستند چراکه از سرور تقاضای کار بیشتر نمی‌کنند. سایت استاتیک و داینامیک هر دو مزایا و معایب خود را دارند که در مقاله قبلی به بررسی کلیه ویژگی های سایت داینامیک پرداخته شد و در این مقاله سایت استاتیک مورد بررسی قرار می گرفت.

سایت های استاتیک

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

static website design service aaravinfotech 300x300 انواع سایت: سایت استاتیک

مزایای سایت استاتیک

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

هزینه های مربوط به هاستینگ سایت استاتیک پایین تر از سایت داینامیک خواهد بود.

هزینه های مربوط به توسعه سایت استاتیک نیز از سایت داینامیک پایین تر خواهد بود.

سرعت طراحی و توسعه سایت استاتیک بیشتر است.

معایب سایت استاتیک

مشکل اساسی در سایت های استاتیک بروزرسانی آن هاست. درشرایطی که صاحب سایت آشنایی با HTML و متدهای طراحی بکار گرفته شده نداشته باشد، برای بروزرسانی باید مجدداً به طراح سایت مراجعه نماید. زمانی که تغییرات مورد نیاز باید بر تمام صفحات سایت اعمال شوند این مطلب می تواند برای صاحب و طراح سایت دردسرآفرین باشد.

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

هزینه های بروزرسانی برای سایت های استاتیک بالا هستند.

سایت های استاتیک معمولاً  با HTML نوشته می شوند و در این شرایط، کد هر صفحه برای کاربر قابل نمایش است.

منابع:

۱) www.spiderwriting.co.uk

۲) www.inmotionhosting.com

۳) www.rocketmedia.com

]]> http://tarahan.com/%d8%a7%d9%86%d9%88%d8%a7%d8%b9-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d8%b3%d8%aa%d8%a7%d8%aa%db%8c%da%a9/feed/ 0 سایت داینامیک http://tarahan.com/%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%a7%db%8c%d9%86%d8%a7%d9%85%db%8c%da%a9/ http://tarahan.com/%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%a7%db%8c%d9%86%d8%a7%d9%85%db%8c%da%a9/#respond Tue, 08 Mar 2016 13:33:02 +0000 http://tarahan.com/?p=6304 […]]]> چنانچه در نظر دارید تا سرعت سایت خود را افزایش دهید ابتدا باید بدانید سایت شما از چه نوعی است. آیا سایتی داینامیک است یا استاتیک؟ جهت مقایسه مختصر سایت داینامیک و استاتیک می توان گفت که سایت های داینامیک به منابع سرور زیادی نیاز دارند؛ درنتیجه، از سرعت پایین تری برخوردارند. ولی در زمان بروز‌رسانی از انعطاف پذیری بالایی برخوردارند. این درحالی است که وب سایت های استاتیک بطور ذاتی سریع تر هستند چراکه از سرور تقاضای کار بیشتر نمی‌کنند. سایت داینامیک و استاتیک هر دو مزایا و معایب خود را دارند که در این مقاله به بررسی کلیه ویژگی های سایت داینامیک پرداخته و در مقاله بعدی سایت استاتیک مورد بررسی قرار خواهد گرفت.

سایت داینامیک

در سایت های داینامیک براحتی می توان محتوای سایت را تغییر داد. به همین دلیل، علاوه بر CSS و HTML، از اسکریپت نویسی server-side (سرور سایت) نیز استفاده می شود تا بطور داینامیک بتوان صفحات درخواستی کاربر را ایجاد کرد. در دهه گذشته اغلب سایت ها بصورت استاتیک طرحی شدند ولی با گذشت زمان طراحان دریافتند که طراحی داینامیک مزایای بیشتری داشته و می تواند موجب جلب رضایت کاربران شود.

Designing Dynamic Website 1 300x137 سایت داینامیک

طراحی سایت

 

مزایای سایت داینامیک

مزیت عمده سایت های داینامیک این است که دیتابیس ها (databases یا پایگاه های داده) را به هم مرتبط می سازند در نتیجه کاربر به آسانی می تواند اطلاعات را در کنار هم قرار داده و بدین ترتیب صفحات سایت یا دسته بندی های متعدد سایت را ایجاد نماید. به عبارت دیگر، با این روش می توان یک سیستم مدیریت محتوا ایجاد کرد یعنی یک واسط که به کاربر اجازه می دهد تا داده ها را در جایی قرار داده و آن ها را مدیریت نماید. این محتوا می تواند متن صفحات سایت باشد یا آیتم محصولات برای دسته بندی های سایت.  اغلب سیستم های مدیریت محتوا (CMS یا Content Management System) در سرور مانند وردپرس، جوملا و دروپال سایت‌های داینامیک ایجاد می کنند. سایت داینامیک کاربردی ترند و به روز رسانی آن‌ها به طور چشم گیری آسان‌تر است.

معایب سایت داینامیک

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

توسعه اینگونه سایت ها به کندی صورت می گیرد و هزینه بیشتری خواهد داشت.

هاستینگ سایت داینامیک نیز هزینه بیشتری خواهند داشت.

منابع:

۱) www.spiderwriting.co.uk

۲) www.inmotionhosting.com

 

 

 

]]> http://tarahan.com/%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%a7%db%8c%d9%86%d8%a7%d9%85%db%8c%da%a9/feed/ 0 بُعد UX (تجربه کاربری) تایپوگرافی http://tarahan.com/%d8%a8%d8%b9%d8%af-ux-%d8%aa%d8%a7%db%8c%d9%be%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c/ http://tarahan.com/%d8%a8%d8%b9%d8%af-ux-%d8%aa%d8%a7%db%8c%d9%be%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c/#respond Tue, 08 Mar 2016 09:12:59 +0000 http://tarahan.com/?p=6295 […]]]> تایپوگرافی تنها مربوط به فونت ها و رنگ ها نیست. اگرچه که این مقوله همیشه بعنوان یک واسط مورد بررسی قرار گرفته است، ولی با درنظر گرفتن برخی جزئیات، می توان گفت تایپوگرافی بخشی از UX و اهداف محتوایی یک سایت است.

همیشه پیش از انتخاب typeface یا طراح فونت ها به مطالعه محتوا بپردازید و بعد برای گزینش typeface تصمیم گیری نمایید. در ادامه باید مکان قرارگیری آن را درنظر گرفت. همیشه به یاد داشته باشید که بدنه متن باید جهت گیری مشخصی داشته باشد یعنی باید چپ چین یا راست چین باشد. حالت justify (مرتب سازی) اگرچه ابتدا و انتهای خطوط را همسان می کند ولی فاصله ای که بین حروف و کلمات قرار می گیرد، می تواند مشکل زا باشد و برای خواننده خسته کننده باشد. بهتر است عناوین یا جملات کوتاه در وسط خط قرار بگیرند چراکه به خوبی توجه کاربر را جلب می کنند.

پس از انتخاب کامل نوع و سبک تایپوگرافی می توان آن را به تمام محتوای سایت اعمال نمود. این سیستم تایپوگرافیک بطور ناخودآگاه تاثیر بسزایی بر خواننده می‌گذارد چراکه مانند یک زبان مصور به خواننده کمک می کند تا اهمیت محتوای متن را درک کند.

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

در ادامه به بررسی ۳ نمونه تایپوگرافی می پردازیم که مکمل مبحث UX یا تجربه کاربری می باشند.

۱. TeamWeek

NET275 focus on بُعد UX (تجربه کاربری) تایپوگرافی ترکیبی از سبک های متنوع فونت در صفحه سایت TeamWeek

برنامه TeamWeek با ترکیب سبک های متضاد فونت مانند serif و sans-serif و هماهنگی ترکیب های رنگی، خلاقیت چشم گیری بکار گرفته است.

۲. Design Disruptors

NET275 focus on 2 بُعد UX (تجربه کاربری) تایپوگرافی

در سایت Design Disruptors  از تایپوگرافی استفاده شده که تمامی نوشته ها در مرکز و در پس زمینه ای سفید قرار دارند که بخوبی توجه کاربران جلب می نمایند.

۳. Web Standards

NET275 focus on 3 بُعد UX (تجربه کاربری) تایپوگرافی

در سایت جدید Web Standards آمریکا که در ارتباط با استانداردهای طراحی سایت می باشد، انتخاب typeface ها هم کاربردی است و هم به لحاظ دیداری جذاب است. این نوع تایپوگرافی به نوعی حس اعتماد را به کاربران القا می کند.

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%a8%d8%b9%d8%af-ux-%d8%aa%d8%a7%db%8c%d9%be%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c/feed/ 0 تاثیر هاستینگ بر SEO http://tarahan.com/%d8%aa%d8%a7%d8%ab%db%8c%d8%b1-%d9%87%d8%a7%d8%b3%d8%aa%db%8c%d9%86%da%af-%d8%a8%d8%b1-seo/ http://tarahan.com/%d8%aa%d8%a7%d8%ab%db%8c%d8%b1-%d9%87%d8%a7%d8%b3%d8%aa%db%8c%d9%86%da%af-%d8%a8%d8%b1-seo/#respond Mon, 07 Mar 2016 13:27:33 +0000 http://tarahan.com/?p=6288 […]]]> مقوله هاستینگ بلاگ یکی از مهم ترین تصمیم گیری ها برای توسعه سایت می باشد. یک تصمیم اشتباه می تواند تاثیر منفی بر SEO سایت داشته باشد. اما تصمیم‌گیری صحیح می تواند در این زمینه به موفقیت بلاگ شما کمک چشمگیری کند. در این مقاله تاثیر هاستینگ بر SEO مورد بررسی قرار می گیرد.

گزینه هایی که برای هاستینگ یک سایت وجود دارند عبارتند از:

فولدر فرعی – مثال: http://www.domain.com/blog

دامنه فرعی – مثال: http://blog.domain.com

دامنه مجزا – مثال: http://www.newdomain.com

web hosting technology تاثیر هاستینگ بر SEO

اما بهترین گزینه هاستینگ برای بلاگ شما چیست؟

فولدر فرعی:

  • هر بلاگی صلاحیت سایت مادر را به ارث می برد درنتیجه فوراً می تواند به برتری قابل توجهی برسد.
  • لینک هایی که در محتوای بلاگ وجود دارند می توانند به سایر محتواهای دامنه کمک کنند؛ بعنوان مثال، صفحات محصول به ranking بالاترین دست می یابند.
  • در این شرایط بلاگ ها با سایت اصلی بهتر ادغام می شوند و درنتیجه تاثیر مثبتی بر جلب رضایت کاربر دارند (حتی اگر طراحی بلاگ ها کاملاً متفاوت باشد).
  • گوگل از همان اولین روزهای ارسال مطالب، بلاگ را مورد بررسی قرار می دهد و این امر در SEO بسیار تاثیرگذار است.

دامنه فرعی:

    • به لحاظ تکنیکی توسعه بلاگ آسان تر است.
    • برخی از ویژگی های مثبت فولدر فرعی و دامنه مجزا را در بر گرفته است. بعنوان مثال، مانند فولدر فرعی صلاحیت سایت مادر را به ارث می برد و مانند دامنه مجزا لینک های بازگشت به سایت اصلی را فراهم می کند.
    • مانند فولدر فرعی از ranking بالا یا سریع برخوردار نمی باشد.
    • برای بدست آوردن شهرت تنها به لینک های برگشتی از سایر سایت ها نیاز دارد.

دامنه مجزا:

  •  می توان در کشور دیگری بلاگ ایجاد کرد – بعنوان مثال سایت اصلی در کشور انگلستان و بلاگ آن در کشور آمریکا باشد.
  • می توان هویت برند را متمایزتر نمود که در حقیقت بعنوان یک سایت مستقل دیده می شود و متعاقباً با کاربران خود بطور جداگانه در ارتباط است.
  • Ranking رقابتی در این نوع هاستینگ وجود ندارد و این امر به کیفیت محتوای بلاگ بستگی دارد.
  • نیاز به محتواسازی و توسعه لینک های برگشتی طولانی مدت وجود دارد.

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

منبع: www.smartinsights.com

]]> http://tarahan.com/%d8%aa%d8%a7%d8%ab%db%8c%d8%b1-%d9%87%d8%a7%d8%b3%d8%aa%db%8c%d9%86%da%af-%d8%a8%d8%b1-seo/feed/ 0 مختصری بر تاریخچه طراحی گرافیک http://tarahan.com/%d9%85%d8%ae%d8%aa%d8%b5%d8%b1%db%8c-%d8%a8%d8%b1-%d8%aa%d8%a7%d8%b1%db%8c%d8%ae%da%86%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9/ http://tarahan.com/%d9%85%d8%ae%d8%aa%d8%b5%d8%b1%db%8c-%d8%a8%d8%b1-%d8%aa%d8%a7%d8%b1%db%8c%d8%ae%da%86%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9/#respond Sun, 06 Mar 2016 14:06:38 +0000 http://tarahan.com/?p=6277 […]]]> گفته می شود که طراحی گرافیک از زمان های خیلی دور در میان انسان ها وجود داشته و برای تزئین وسایل، ساختمان ها و پارچه ها بکار گرفته می‌شود. اصطلاح طراحی گرافیک و شغل مرتبط با آن با ورود صنایعی چون عکاسی، چاپ و ویدئو رونق فراوانی یافت و امروزه به کار افرادی اتلاق می شود که در طراحی چاپ عمومی و صنعت چاپ کتاب مورد استفاده قرار می گیرد.

پیشگامان طراحی گرافیک01 printer press 233x300 مختصری بر تاریخچه طراحی گرافیک

از همان آغاز تمدن بشر، انسان ها به طراحی گرافیک علاقه مند بودند و از آن بعنوان نماد قدرت استفاده می کردند. بی گمان اولین مثال ها از طراحی گرافیک می‌توانند پرچم ها و سکه هایی باشند که صورت امپراتورها روی آن ها حک شده اند.

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

انقلاب رسانه های جمعی

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

coke vintage sign مختصری بر تاریخچه طراحی گرافیک

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

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

حرکت به سمت دیجیتال شدن

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

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

منبع: www.webdesignviews.com

]]> http://tarahan.com/%d9%85%d8%ae%d8%aa%d8%b5%d8%b1%db%8c-%d8%a8%d8%b1-%d8%aa%d8%a7%d8%b1%db%8c%d8%ae%da%86%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9/feed/ 0 ۱۰ اصل طراحی UX برای نرم افزارهای موبایل و وب سایت ها http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-ux/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-ux/#respond Sun, 06 Mar 2016 11:37:09 +0000 http://tarahan.com/?p=6243 […]]]> امروزه وسایل پرتابل از محبوبیت بالایی برخوردارند و شناخت مردم نسبت به این ابزار افزایش یافته است. با این وجود، همچنان پتانسیل مطالعه بیشتر روی این وسایل وجود دارد. در دهه های گذشته تنها داشتن سایت های مینیمال برای لوازم پرتابل قابل پذیرش بود اما در حال حاضر سطح نیازها افزایش یافته است. کاربران انتظار دارند از جستجو در وب بوسیله ابزار پرتابل نیز تجربه خوبی داشته باشند. سایت هایی که در جلب رضایت کاربران و یا طراحی UX با هر ابزاری موفق نیستند نه تنها منجر به از دست رفتن فرصت های آتی کسب و کار می شوند بلکه خود تجارت را به مخاطره می اندازند. بنابراین هر چه زودتر طراحی UX در وسایل پرتابل بهینه یابد، هم برای کاربران و هم صاحبان کسب و کار بهتر خواهد بود. همه آنچه که باید در نظر گرفت راحتی کار با ابزار پرتابل است.

در این مقاله به ۱۰ اصل UX Design برای نرم افزار های موبایل و وب سایت ها می پردازیم و آن ها را مورد بحث و بررسی قرار می دهیم.

۱. طراحی UX – درک انگیزه کاربر

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

۲. طراحی UX – تعریف محتوای سایت یا نرم افزار موبایل بر اساس کاربرد آن

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

۳. طراحی UX – نمایش مهم ترین ویژگی ها و محتوا 

زمانی که تنها یک صفحه نمایش ۳ یا ۴ اینچی بجای صفحه ۲۷ اینچی مانیتور دارید باید برای نمایش محتوا اولویت بندی نموده و بخش هایی که مهم تر هستند را در نسخه موبایل لحاظ نمایید. غالباً زمان طراحی برای موبایل کاهش ویژگی ها و حجم محتوا بوضوح قابل مشاهده است چرا که دیده شده کاربران موبایل غالباً بطور متفاوتی برخورد می نمایند. تنها چند صفحه یا ویژگی حائز اهمیت وجود دارند که مشخصاً باید در ابتدای امر به طراحی اضافه شوند. باقی صفحات و ویژگی ها را می توان در منوها مشاهده نمود.

airfrance 10 اصل طراحی UX برای نرم افزارهای موبایل و وب سایت ها

۴. طراحی UX – طراحی navigation های کاربردی تر

از آنجایی که صفحه موبایل نسبت به سایر صفحات نمایش کوچک تر است سیستم navigation بکار گرفته شده باید حساب شده ولی همچنان کامل باشد. یکی از بهترین روش ها استفاده از navigation عمودی بجای navigation افقی است. علاوه براین، می توان از navigation منویی استفاده نمود که بدین ترتیب بهتر و بیشتر می توان تصاویر و یا محتوای تصویری را نمایش داد. navigation به هر روشی که باشد باید در نظر داشت بهتر است منوها واضح و دقیق باشند تا کاربران بتوانند براحتی از سایت بازدید نمایند.

۵. طراحی UX – طراحی ساده

با نگاهی به نرم افزارهای Apple store می توان دریافت که همگی از سادگی جذابی برخوردار هستند و المان های طراحی پیچیده اصلاً دیده نمی شود. این امر می تواند تاثیر مثبتی در جلب رضایت کاربران داشته باشد.

۶. طراحی UX – استفاده مناسب از ویژگی های خاص موبایل

آیا زمانی که تلفن های همراه تنها برای برقراری تماس تلفنی بودند به خاطر می آورید؟ اگرچه زمان زیادی از آن موقع می گذرد اما این ویژگی همچنان در تمام تلفن های همراه وجود دارد و در حقیقت قوی ترین مزیت تلفن های هوشمند نسبت به صفحات نمایش است. می توان از همین ویژگی ساده در طراحی سایت استفاده نمود و تغییرات عظیمی در سایت یا نرم افزار ایجاد کرد. یکی دیگر از ویژگی های خاص تلفن‌های همراه، اطلاعات موقعیتی و مکانی است. علاوه براین، notification های هر نرم افزار بخوبی توجه کاربران را جلب نموده و این خاصیتی است که تنها برای نرم افزار ها دیده می شود.

۷. طراحی UX – بهینه سازی فرم ها و کاهش ورودی داده ها

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

airfr 10 اصل طراحی UX برای نرم افزارهای موبایل و وب سایت ها

۸. طراحی UX – دسترسی به کل سایت

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

bookingcom 10 اصل طراحی UX برای نرم افزارهای موبایل و وب سایت ها

۹. طراحی UX – طراحی notification ها و alert ها مناسب برای کاربران

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

۱۰. طراحی UX – استفاده از برترین تکنولوژی و  دریافت بازخورد ها

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

منبع: www.webdesignviews.com

 

 

 

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-ux/feed/ 0 ۵ تصور اشتباه در مورد Dreamweaver http://tarahan.com/5-%d8%aa%d8%b5%d9%88%d8%b1-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%af%d8%b1-%d9%85%d9%88%d8%b1%d8%af-dreamweaver/ http://tarahan.com/5-%d8%aa%d8%b5%d9%88%d8%b1-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%af%d8%b1-%d9%85%d9%88%d8%b1%d8%af-dreamweaver/#respond Sat, 05 Mar 2016 13:28:13 +0000 http://tarahan.com/?p=6225 […]]]> امروزه شبکه با سرعت بالایی رو به تکامل است و طراحان نیاز دارند تا با آخرین تکنولوژی ها و نوآوری های موجود در بازار همراه باشند. نرم‌افزار Adobe Dreamweaver یکی از قدیمی ترین نرم افزارها در زمینه طراحی سایت است که به نظر می رسد طی سال ها منسوخ شده باشد حال آنکه این باور کاملاً اشتباه است. در سال ۲۰۱۲ شرکت ‌Adobe با معرفی برنامه Creative Cloud به سمت رشد و پیشرفت دائمی تغییر جهت داد و این بدان معناست که کاربران با هرگونه تغییری قادر به بروز رسانی Dreamweaver بوده و دیگر نیازی به انتظار برای نسخه جدید نیست. علاوه براین، می توان فهمید که Dreamweaver بطور نزدیکی با سایر ابزار های ‌Adobe در ارتباط است و بوسیله برنامه Creative Cloud راهی برای دسترسی، اشتراک و استفاده از المان های طراحی سایت نیز وجود دارد.

همانند سایر نرم افزارهایی که طول عمر زیادی دارند، تصورات غلطی درباره Dreamweaver وجود دارد که امروزه هیچکدام صحت ندارند. در سال‌های اخیر نرم افزار Dreamweaver تغییرات مثبتی را متحمل شده و همگام به نوآوری های این صنعت، در زمینه تجربه کاربر نیز بهبود یافته است.

در این مقاله، ۵ مورد از مهم ترین تصورات نادرست در زمینه ‌Dreamweaver بررسی می شوند.

۱. نرم افزار Dreamweaver کدهای زیادی را در صفحات وب بجا می گذارد که منجر به شلوغ شدن سایت شده و  بر SEO یا بهینه سازی برای موتورهای جستجو موثر می باشد. 

Dreamweaver Creative Cloud کدهای زائد را ایجاد نمی کند و این رویکرد امروزه کاملاً غلط است. با این وجود، چنانچه کدی به درستی نوشته نشود، صفحه سایت بدرستی کار نخواهد کرد که این مطلب در مورد تمامی ابزارهای طراحی صدق می کند. درست است که مشکل ذکر شده قبلاً برای این نرم افزار وجود داشته است اما سال های متمادی است که این مشکل برطرف شده است.

۲. برای استفاده از Dreamweaver نیازی به دانستن کدنویسی نیست.

برای اینکه در کار کردن با Dreamweaver موفق بوده و بتوانید سایت های جالبی با آن طراحی کنید باید با کدنویسی HTML/CSS آشنا باشید. با این وجود، Dreamweaver ابزاری در اختیار شما قرار می دهد که بعنوان یک طراح سایت حرفه ای یا تازه کار می توانید براحتی از آن استفاده نمایید. علاوه براین، شرکت Adobe ابزار نرم افزار دیگری نیز طراحی نموده است که برای تازه کاران کدنویسی بسیار مناسب است و Adobe Muse نام دارد. این نرم افزار نیازی به کدنویسی نداشته و طراحان گرافیکی متعددی برای توسعه سایت های خود آن را بکار گرفته اند.

coding 924920 960 720 5 تصور اشتباه در مورد Dreamweaver

۳. نمی توان به المان WYSIWYG (دریافت عین مشاهده) در Dreamweaver اعتماد کرد.

سیستم WYSIWYG مخفف کلمات “What You See Is What You Get” است که در آن متن یا تصویر در حال ویرایش، همان خروجی است که مشاهده خواهد شد. یکی از مهم ترین برنامه های این سیستم، Dreamweaver است. سیستم مدرن طراحی Dreamweaver که Live View یا نمایش زنده نام دارد از همان موتور رندر یا جستجوگر HTML که برای گوگل کروم بکار گرفته می شود، استفاده می کند. بر این اساس، می‌توان اطمینان حاصل کرد که پیش نمایش کد در Live View مشابه همان چیزی است که در HTML کروم دیده می شود.

۴. نرم افزار Dreamweaver تنها برای طراحی وب سایت است و طراحی ریسپانسیو را پشتیبانی نمی کند. 

در سال ۲۰۱۵ برای اولین بار طراحی ریسپانسیو در Dreamweaver معرفی شد و از آن زمان بروز رسانی های لازم روی آن انجام شد. علاوه براین، ویژگی های این نرم افزار کاربران را قادر می سازد تا طراحی های ریسپانسیو خود را روی وسایل پرتابل حقیقی امتحان نمایند. اهمیت این موضوح بوضوح قابل لمس است که متقاضیان خواستار طراحی سایت در تبلت ها و ابزار پرتابل هستند.

۵. Dreamweaver از code snippet های ضعیف و نسخه منسوخ کدنویسی CSS برخوردار است.

علاوه بر قابلیت طراحی ریسپانسیو، در سال ۲۰۱۵ آخرین و جدیدترین نسخه snippet ها در Dreamweaver ارائه شدند. طراحی مدرن و ریسپانسیو سایت ها با  استفاده از کدهای snippet، نسبت به گذشته آسان تر می باشد.  استفاده از پنل طراحی CSS برای ویرایش CSS این امکان را می دهد تا بتوان سبک ها، فایل ها و ویژگی های CSS را ایجاد نمود.

منبع: www.creativebloq.com

 

 

]]> http://tarahan.com/5-%d8%aa%d8%b5%d9%88%d8%b1-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%af%d8%b1-%d9%85%d9%88%d8%b1%d8%af-dreamweaver/feed/ 0 ایده هایی برای طراحی سایت http://tarahan.com/%d8%a7%db%8c%d8%af%d9%87-%d9%87%d8%a7%db%8c%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%a7%db%8c%d8%af%d9%87-%d9%87%d8%a7%db%8c%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Wed, 02 Mar 2016 12:02:09 +0000 http://tarahan.com/?p=6177 […]]]> امروزه داشتن ایده های خلاقانه در طراحی سایت اهمیت ویژه ای دارد چرا که سایت های زیادی طراحی شده اند اما همه نمی توانند از موفقیت خوبی برخوردار شوند و این امر در ارتباط با ایده ها و چگونگی طراحی می باشد.

در ادامه، نکات و ایده های جالب توجهی در زمینه طراحی سایت پیشنهاد شده است که می توانند در فرآیند طراحی مفید واقع شوند.

۱. طراحی سایت در یک صفحه

سایت های تک صفحه ای از طراحی محبوبی برخوردار هستند و برای کاربران عجولی که می خواهند در کمترین زمان ممکن از کل سایت دیدن نمایند، بهترین گزینه محسوب می شوند. با استفاده از CSS، HTML5 و JQuery سایت های تک صفحه ای به سرعت بارگذاری می شوند.

تکنیک های طراحی سایت متعددی برای جلب توجه کاربران وجود دارند:

برخی از آن ها عبارتند از:

۱. استفاده از المان هایی از قبیل parallax scrolling، که با حرکت آهسته تصاویر پس زمینه نسبت تصاویر پیش زمینه، حس ۳D بودن آن را به همراه دارد.

۲. طراحی سایت flat یا Flat UI، که تمرکز اصلی آن استفاده آسان و واضح از سایت است.

۳. تصاویر تمام صفحه پس زمینه

۴. تایپوگرافی صفحه که به طراحان این امکان را می دهد تا طراحی تک صفحه ای خود را از سایرین متمایز نماید.

۵. طراحی سایت ریسپانسیو (Responsive) که یک سایت را در اندازه بهینه شده برای تمامی صفحات نمایش و ابزار الکترونیکی به نمایش می‌گذارد.

۶. بکارگیری رسانه های اجتماعی که به اشتراک گذاری محتوای سایت را امکان پذیر می نماید.

۲. ایده های طراحی سایت با استفاده از Grids و Squares

Grid چیست؟

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

چرا طراحان وب سایت نیاز به استفاده از سیستم grid دارند؟

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

۳. ایده های طراحی سایت با استفاده از آیکون ها

آیکون ها ابزاری گرافیک برای جلب توجه کاربران به شمار می روند. درحقیقت، آیکون ها بدون نیاز به کلمات پیغام شما را به کاربران می‌رسانند، کاربران را مجاب می کنند تا از بخش های مختلف سایت دیدن کرده و در نهایت خواهان دریافت خدمات یا محصولات شما باشند.

icon website fimg ایده هایی برای طراحی سایت

 ۴. طراحی سایت به سبک قدیمی

در برخی صنایع، طراحی سایت به سبک قدیمی یعنی سال های ۱۹۰۰ تا ۱۹۸۰ می تواند تاثیر مثبتی بر نظر بیننده داشته باشد. سبک تبلیغات و کاراکترهای قدیمی، کاورها، روزنامه ها و مجلات، پوسترهای سینمایی و بیلبوردها می توانند الهام بخش خوبی برای این نوع طراحی باشند. از آنجایی که طراحی های قدیمی خاطرات مثبت و نوستالژیک را از  گذشته به یاد کاربران می آورند درنتیجه می توانند با بازخورد خوبی مواجه شوند.

۵. منوهای Navigation جذاب 

منوهای navigation از اهمیت بالایی در جلب توجه کاربران دارند در نتیجه می توان از طراحی های منحصربفردی برای هرچه زیباتر کردن این منوها استفاده کرد. برای این منظور می توان از جلوه های دایره ای، چوبی و منوهای انتزاعی الهام گرفت. بنابراین زمان طراحی سایت، چنانچه بدنبال فرصتی برای متمایز کردن سایت خود هستید، بهتر است توجه ویژه ای به منوی navigation داشته باشید.
navi menu ایده هایی برای طراحی سایت

۶. استفاده از المان های دایره ای

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

circle start ایده هایی برای طراحی سایت

 علاوه بر راهکارهای ذکر شده، می توان به نکات دیگری برای هر چه بهتر کردن طراحی سایت اشاره کرد:

۷. بکارگیری اسلایدرها و گالری ها

۸. استفاده از تصاویر پس زمینه تمام صفحه

۹. صفحه آرایی های خلاقانه

۱۰. استفاده از چیدمان های هندسی و انتزاعی در طراحی سایت

منبع: www.entheosweb.com

]]> http://tarahan.com/%d8%a7%db%8c%d8%af%d9%87-%d9%87%d8%a7%db%8c%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 لایه ها در Dreamweaver http://tarahan.com/%d9%84%d8%a7%db%8c%d9%87-%d9%87%d8%a7-%d8%af%d8%b1-dreamweaver/ http://tarahan.com/%d9%84%d8%a7%db%8c%d9%87-%d9%87%d8%a7-%d8%af%d8%b1-dreamweaver/#respond Wed, 02 Mar 2016 07:38:54 +0000 http://tarahan.com/?p=6153 […]]]> لایه ها در Dreamweaver اجزای DHTML بوده و با اندکی تفاوت مشابه جداول می باشند. در حقیقت لایه ها، همانند جداول دربرگیرنده متن ها یا تصاویر هستند. اما لایه ها در Dreamweaver این قابلیت را دارند تا یک تصویر یا متن را در موقعیت مشخصی از صفحه و Dreamweaver قرار دهند. برای تغییر موقعیت لایه، می توان آن را انتخاب کرده و در هر جایی که مطلوب است قرار داد. لایه ها می توانند قابل دیدن یا مخفی باشند و این خود یک مزیت برای لایه هاست. در مرورگرهای مختلف، لایه ها به شکل متفاوتی دیده می شوند.

با رفتن به مسیر Insert>Layout Objects>Layers از قسمت منو، می توان یک لایه جدید ایجاد کرد. همانطور که در شکل زیر مشاهده می‌کنید یک لایه نمایش داده شده است که می تواند هر محتوایی را دربر بگیرد. برای تغییر ویژگی های هر لایه باید داخل فریم را کلیک کرده و متن یا تصویری را داخل آن تعبیه نمایید. علاوه بر این، در پنجره ویژگی ها می توان رنگ پس زمینه و پیش زمینه، اندازه لایه و تصویر پس زمینه را تغییر داد.

layer1 لایه ها در Dreamweaver

نام گذاری لایه ها در Dreamweaver

زمان ایجاد لایه ها، غالباً نرم افزار Dreamweaver یک نام عمومی مانند Layer 1، Layer 2 و غیره می دهد. برای مراجعه راحت تر شما می‌توانید مطابق میل خودتان نام گذاری نمایید. برای این کار، به پنل لایه ها رفته، بر روی نام لایه دوبار کلیک نموده و نام جدید را وارد نمایید. چنانچه پنل لایه ها دیده نمی شود به قسمت windows رفته و گزینه Layers را انتخاب نمایید. در این شرایط پنل لایه ها قابل مشاهده است.

تغییر قابلیت مشاهده لایه ها در Dreamweaver

در تصویر زیر مشاهده می کنید که علامت چشم در کنار همه لایه ها دیده می شود و این بدان معناست که همه لایه ها قابل مشاهده هستند. زمانی که روی لایه ها کار می کنید بخصوص زمانی که لایه ها هم پوشانی دارند، می توانید با کلیک کردن روی علامت چشم آن ها را غیر قابل دیدن کرده تا براحتی به کار خود ادامه دهید.

layer2 لایه ها در Dreamweaver

تغییر ترتیب لایه ها در Dreamweaver

همانطور که در تصویر بالا قابل مشاهده است داخل ستون Z اعدادی نوشته شده است که ترتیب لایه ها را نشان می دهد. بدین معنی که لایه‌ها بر اساس همین ترتیب در مرورگر نمایش داده می شوند. بزرگ ترین عدد نشان دهنده اولین لایه است. برای تغییر ترتیب لایه ها در Dreamweaver می توان با کلیک کردن روی لایه ها، آن ها را جابه جا کردو علاوه براین، می توان عدد ستون Z را نیز تغییر داد.

منبع: www.entheosweb.com

]]> http://tarahan.com/%d9%84%d8%a7%db%8c%d9%87-%d9%87%d8%a7-%d8%af%d8%b1-dreamweaver/feed/ 0 نکات آموزشی Dreamweaver http://tarahan.com/%d9%86%da%a9%d8%a7%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-dreamweaver/ http://tarahan.com/%d9%86%da%a9%d8%a7%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-dreamweaver/#respond Tue, 01 Mar 2016 12:51:53 +0000 http://tarahan.com/?p=6133 […]]]> نکات آموزشی Dreamweaver در زمینه جداول، فرم ها، سبک های CSS و غیره

تاکنون توضیحات خوبی در مورد نرم افزار Dreamweaver داده شده است. در این بخش به نکات آموزشی Dreamweaver در مواقع استفاده از جداول، فرم ها، سبک های CSS، لینک ها و سایر موارد اشاره می شود.

dreamweaver box logo 300x300 نکات آموزشی Dreamweaver

نکات آموزشی Dreamweaver – لینک ها:

  • برای تغییر رنگ آبی پیش فرض لینک ها می توان به قسمت Modify  رفته و گزینه Page Properties  را انتخاب نمایید. اینجا می توانید رنگ لینک را تغییر داد. تمامی لینک ها به رنگ مدنظر شما تغییر رنگ خواهند داد.
  • چنانچه خواهان لینک کردن بخشی از صفحه هستید می توانید از ویژگی بنام NAmed Anchors استفاده کنید. بعنوان مثال، اگر بخواهیم به تصاویر Rollover لینک کنیم باید یک named anchor داشته باشیم تا به بخش تصاویر Rollover هدایت شویم. برای این کار باید نشانه گر موس را روی نقطه ای که می خواهیم لینک شویم قرار می دهیم و از بخش Insert گزینه Named Anchors را انتخاب کرده و بعد نامی را برای anchor انتخاب می کنیم.  در همین زمان، از علامت # هشتگ در کنار نام anchor استفاده کنیم. یک anchor در HTML تنها بوسیله علامت# شناخته می شود. در نتیجه لینک بدین ترتیب خواهد بود: <a href=”#name”>Rollovers</a>

نکات آموزشی Dreamweaver – جداول:

  •  گاهاً ساختن ردیف های جدول با ارتفاع کمتر از ۱۵ پیکسل غیرممکن به نظر می رسد، بویژه در مرورگر Netscape! یکی از نکات آموزشی Dreamweaver مربوط به همین جداول است. تمام آنچه که باید انجام دهید قرار دادن تصویر شفاف gif در ردیف های جدول است و درنهایت ارتفاع جدول تصحیح می شود. در فایل های Firework تصاویر شفاف shim نامیده می شوند. تصویر shim در اندازه ۱*۱ پیکسل می باشند.
  • آیا تاحالا به فکر طراحی جدولی با کادر باریک افتاده اید؟ یا شاید فقط می خواستید جدولی داشته باشید که فقط دورش کادری باریک داشته باشد. در این شرایط می توان دو جدول ساخت که عرض یکی به دلخواه متغیر است بعنوان لایه ای برای جدول اصلی در نظر گرفته می شود. در مرحله بعد می توانید جدول خود را با عرض ۱۰۰% در این لایه قرار دهید. بهتر است توجه داشته باشید که فاصله خانه های بین دو جدول صفر باشد.

نکات آموزشی Dreamweaver – دکمه Submit

آیا تا حالا برای ایجاد کردن دکمه های “Submit” و یا “Go” در Dreamweaver دچار مشکل بوده اید؟ این کار بسیار آسان است. آنچه باید انجام دهید این است که تصویر را انتخاب کرده، آن را ذخیره نمایید و در Dreamweaver مسیر Insert>Form Object>Image Field را برگزینید. بدین ترتیب تصویر مورد نظر برای دکمه را انتخاب کرده اید. بدین ترتیب شما یک دکمه اختصاصی برای خود دارید. کد دستوری مربوط ای این نوع دکمه های ویژه در ادامه آمده است:

<input type=”image” border=”0″ name=”imageField3″ src=”/images/submit.gif”>

نکات آموزشی Dreamweaver – تصاویر Rollover

تصاویر Rollover درDreamweaver به آسانی قابل استفاده هستند. فقط باید دو تصویر داشته باشیم. بعد در درDreamweaver مسیر Insert>Rollover Image را انتخاب می کنیم. برای عکس یک نام اختصاص می دهیم، عکس را انتخاب می کنیم و به عکس لینک می دهیم.

نکات آموزشی Dreamweaver – فاصله گذاری

گاهاً زمان تایپ نیاز است که به خط بعدی مراجعه کنیم ولی نه اینکه فاصله گذاشته شده در حد یک پاراگراف باشد. نکته ای مطلب در این است که بجای Enter کردن از Shift + Enter استفاده نماییم.

علاوه بر این می توان از Ctrl + Shift + Space استفاده کرد که اندکی فاصله را بیشتر می کند.

نکات آموزشی Dreamweaver – تغییر اندازه تصاویر

پس از تغییر اندازه تصاویر در Dreamweaver مسیر Commands>Optimize Image in Fireworks را انتخاب نمایید. در این شرایط، کادری نمایش داده می شود که مبتنی بر ویرایش تصاویر است. با انتخاب گزینه update، تصاویر مربوطه در Dreamweaver بروز رسانی شده و بهینه سازی می شود. بدین ترتیب، به آسانی می توان در سایز تصاویر تغییرات دلخواه را ایجاد کرد.

منبع: www.entheosweb.com

 

]]> http://tarahan.com/%d9%86%da%a9%d8%a7%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c-dreamweaver/feed/ 0 Template های نرم افزار Dreamweaver http://tarahan.com/%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1-%d9%87%d8%a7%db%8c-dreamweaver/ http://tarahan.com/%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1-%d9%87%d8%a7%db%8c-dreamweaver/#respond Tue, 01 Mar 2016 09:10:34 +0000 http://tarahan.com/?p=6111 […]]]> Template های نرم افزار Dreamweaver

یک template چیست؟

یک template ساختاری رایج در یک وب سایت است که در صفحات وب مورد استفاده قرار می گیرند. معمولاً وب سایت ها از ساختاری استاندارد پیروی می کنند بدین معنا که همگی متشکل از یک عنوان، یک منوی ابزار و یک footer بوده و این بخش ها همگی از ارکان رایج و مهم یک صفحه وب می باشند. تصور کنید که سایت شما شامل ۲۵ صفحه باشد. اگر بخواهید تغییر کوچکی مانند افزودن یک لینک جدید اعمال کنید، باید به تمامی ۲۵ صفحه مراجعه نموده و تغییرات را بطور دستی انجام دهید.ولی با استفاده از یکی از Template های نرم افزار Dreamweaver

 می توانید هرگونه تغییری را بطور خودکار در تمامی صفحات اعمال نمایید.

در اینجا چگونگی استفاده از این template ها مورد بررسی قرار می گیرند.

ساختن Template های نرم افزار Dreamweaver

مرحله ۱:

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

مرحله ۲:

زمانی که ساختار اولیه را ساختید به قسمت فایل رفته و گزینه Save As Template را کلیک نمایید، برای آن نامی انتخاب نموده و در نهایت آن را ذخیره نمایید.

مرحله ۳:

توجه داشته باشید که حتماً علامت آبی template ظاهر شده باشد. این نشان می دهد که شما هم اکنون در بخش template هستید. بطور خودکار هر template در فولدری تحت همین عنوان ذخیره می شود. توجه داشته باشید که شما می توانید هر تعداد که می خواهید template بسازید. چنانچه از چیدمان های متفاوت برای صفحات استفاده می نمایید می توانید از template های مختلف برای هر بخش سایت خود استفاده نمایید.

مرحله ۴:

در این مرحله باید تمامی بخش های template را قابل ویرایش نمایید درنتیجه می توانید محتوا و اطلاعات مربوط به هر بخش را اضافه نمایید. از آنجایی که محتوای اصلی هر صفحه متغیر خواهد بود در نتیجه این بخش حتماً باید قابل ویرایش باشد.

مرحله ۵:

برای اینکه یک بخش را قابل ویرایش نمایید باید نشانه گر موس را روی آن بخش قرار داده و بعد گزینه Insert/Template Objects/Editable Region را انتخاب نمایید و نام مناسبی را برای آن در نظر بگیرید. چنانچه به درستی این مرحله را انجام دهید متوجه وجود یک بخش آبی با اسمی که شما انتخاب کرده اید، می شوید که در موقعیت نشانه گر قرار گرفته است.

می توانید اعمال تغییرات را ادامه داده و چیدمان های متفاوت را برای template امتحان کنید.

استفاده از Template های نرم افزار Dreamweaver

با ساختن template ها هنوز کار شما به اتمام نرسیده است. در این بخش باید اطمینان حاصل نمایید که تمامی صفحات از template استفاده می کنند در نتیجه زمانی که template را بروز رسانی می کنید، صفحاتی که از آن template استفاده می کنند بطور خودکار بروزرسانی می شوند.

در ادامه،  مراحل بکارگیری یک template در صفحه سایت آورده شده است.

مرحله اول) پس از اینکه صفحه مدنظر خود را ساختید می توانید یکی از template هایی که طراحی کرده اید برای آن بکار گیرید. برای این کار می توانید به قسمت Modify/Template/Apply Template to page بروید.

مرحله دوم) زمانی که template ویژه ای را برای صفحه سایت انتخاب نمودید پنجره ای تحت عنوان “Choose editable region for orphaned content (انتخاب ناحیه قابل ویرایش برای محتوای صفحه)” ظاهر می شود. درنتیجه، ناحیه قابل ویرایش را انتخاب نمایید. همانطور که مشاهده می کنید template به رنگ زرد نمایش داده شده و قابل ویرایش نیست. تنها بخشی که قابل ویرایش است همان قسمتی است که در template مشخص کردید (مرحله ۵).

توجه داشته باشید که انتخاب template می تواند هم قبل و هم بعد از نوشتن محتوای متنی صورت بگیرد. چنانچه می خواهید بعد از نوشتن متن template را انتخاب نمایید می بایست ناحیه قابل ویرایش جایی که متن قرار می گیرد، باشد.

بروزرسانی Template های نرم افزار Dreamweaver

زمانی که template مدنظر خود را ساختید و آن را برای تمامی صفحات مورد نیاز استفاده کردید، آخرین مرحله نحوه بروزرسانی template است.

هر تغییری که می خواهید در ساختار اولیه سایت ایجاد کنید باید بر روی template انجام دهید. چنانچه template را برای تمامی صفحات سایت خود انتخاب کنید پنجره ای ظاهر می شود که از شما در مورد بروزرسانی template استفاده شده در تمامی فایل ها سوال می پرسد. باید گزینه update را کلیک نمایید.

در این قسمت، می توانید Template های نرم افزار Dreamweaver را که از پیش طراحی شده و قابل استفاده هستند دانلود نموده و در هر زمینه ای بکار گیرید.

نمونه ای از Template های نرم افزار Dreamweaver در زمینه گل:

flower Template های نرم افزار Dreamweaver

دانلود Template

منبع: www.entheosweb.com

]]> http://tarahan.com/%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1-%d9%87%d8%a7%db%8c-dreamweaver/feed/ 0 نرم افزار Dreamweaver http://tarahan.com/%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1-dreamweaver/ http://tarahan.com/%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1-dreamweaver/#respond Mon, 29 Feb 2016 12:55:06 +0000 http://tarahan.com/?p=6101 […]]]> تعریف یک سایت در نرم افزار Dreamweaver

نرم افزار Dreamweaver ابزاری قدرتمند و مطرح برای طراحی و ساخت وب سایت هاست که به کمک آن می توان به راحتی کدها و تگ های مورد نظر را نوشت. اولین کاری که می توان برای استفاده از Dreamweaver کرد تعریف یک سایت در آن است. بدین وسیله می توان به این نرم افزار کمک کرد تا فایل های بکار گرفته شده در سایت را به خوبی دسته بندی نماید.

مرحله اول:

یک فایل در هارد دیسک خود ایجاد نموده و آن را نام گذاری نمایید. در صورت تمایل، می توانید تصاویر یا فایل های مطلوب خود را داخل آن کپی نمایید.

مرحله دوم:

از قسمت Site، گزینه Manage Sites را انتخاب نموده و سپس گزینه New را کلیک نمایید. پنجره زیر پیش روی شما گشوده خواهد شد که داخل آن می توانید جزئیات سایت را در بخش Local Info وارد نمایید.

define site 1 نرم افزار Dreamweaver

مرحله سوم:

در حال حاضر نرم افزار Dreamweaver محتوای فولدر را در Files panel نمایش می دهد. در این جا فایل ها بدرستی دسته بندی شده و نرم افزار می داند که کجا باید بدنبال فایل ها بگردد. از این مرحله به بعد می توان توسعه صفحات سایت را آغاز نمود.

همانطور که در تصویر بالا مشاهده می کنید در قسمت Site Name می توانید اسم سایت خود را وارد نمایید.

بخش Local Root Folder جایی است که تمامی فایل های سایت ذخیره می شوند و هر کدام به ترتیبی که زودتر ایجاد شده اند قرار می گیرند. می توان برای یافتن هر فولدر، آن را جستجو نموده و برای گزینش، آن را کلیک نمایید.

لیست موجود در Local File را بطور خودکار refresh نمایید. این کار کمک می کند تا فایل ها و تصاویر جدیدی که به سایت شما افزوده می شوند بطور خودکار refresh شده و برای شما قابل دسترسی باشند.

در بخش آدرس HTTP می بایست url سایت را وارد نمود تا نرم افزار Dreamweaver لینک ها را چک نماید.

و در نهایت گزینه Cache است که باید انتخاب شود.

تمامی مراحل تعریف یک سایت برای نرم افزار Dreamweaver در اینجا آورده شده است.

منبع: www.entheosweb.com

]]> http://tarahan.com/%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1-dreamweaver/feed/ 0 جداول HTML http://tarahan.com/%d8%ac%d8%af%d9%88%d9%84-html/ http://tarahan.com/%d8%ac%d8%af%d9%88%d9%84-html/#respond Mon, 29 Feb 2016 10:50:56 +0000 http://tarahan.com/?p=6018 […]]]> امروزه بجای طراحی گرافیکی وب سایت که همراه با بارگذاری آهسته است، استفاده از جداول HTML بسیار رواج دارد که ظاهری حرفه ای به صفحات سایت داده و بارگذاری آن ها سریع تر می باشد. در این مقاله به بررسی جداولی می پردازیم که برای طراحی صفحات سایت بسیار کاربردی هستند و در کنار هر یک، مثال ها و کدهایی برای استفاده از آن ها داده شده است.

نکات استفاده از جداول HTML 

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

در ادامه به بررسی طراحی های جالب بوسیله انواع جداول HTML می پردازیم.

جداول HTML با کادر سفیدtable 1 جداول HTML

نکته کلیدی در این جداول استفاده از تصویر شفاف (۱*۱ پیکسل) است که shim نامیده می شود. این نوع جدول از ۳ ردیف و ۳ ستون تشکیل شده است. عرض و ارتفاع ردیف وسط ۱ پیکسل است. ارتفاع جدول کمتر از ۵ پیکسل نمی تواند باشد و باید یک تصویر در آن قرار داشته باشد. بدین ترتیب، شما جدولی خواهید داشت که می توانید بوسیله آن بخش های مهم صفحه سایت خود را نمایش دهید.

جداول HTML با کادر باریکtable 2 جداول HTML

آیا تاحالا به فکر طراحی جدولی با کادر باریک افتاده اید؟ یا شاید فقط می خواستید جدولی داشته باشید که فقط دورش کادری باریک داشته باشد. در این شرایط می توان دو جدول ساخت که عرض یکی به دلخواه متغیر است بعنوان لایه ای برای جدول اصلی در نظر گرفته می شود. در مرحله بعد می توانید جدول خود را با عرض ۱۰۰% در این لایه قرار دهید. بهتر است توجه داشته باشید که فاصله خانه های بین دو جدول صفر باشد.

جداول HTML در دل یک جدولtable3 جداول HTML

در این نوع طراحی می توان چندین جدول را در یک خط قرار داد. گزینه های متنوعی برای رنگ های پس زمینه ستون ها وجود دارند. در تصویر زیر ۲ ردیف و ۵ ستون وجود دارد. در ردیف اول متن مربوط به قسمت عنوان نوشته شده است و در ردیف دوم متن مربوط به داخل جدول. هر جدول عرض و ارتفاع ۱۰۰% دارد. فضای سفید میان جداول خود یک ستون است که عرض ۳ پیکسل دارد. توجه داشته باشید که نمی توانید ۳ جدول متفاوت بسازید که همگی در یک خط بیایند. در این شرایط می توانید جداول را در یک ستون قرار دهید نه در یک ردیف.

table 4 جداول HTMLجداول HTML با کادر برای تمامی خانه های

در اینجا ساده ترین روش برای ساختن یک جدول با کادر برای تمامی خانه ها نمایش داده شده است. می توان از border property برای ایجاد کادر دور تمامی خانه ها استفاده کرد. توجه داشته باشید در مرورگر Netscape این کادر به رنگ خاکستری دیده می شود.

ادغام خانه ها در یک جدولtable 5 جداول HTML

برای داشتن طراحی جالب و جذابی از یک جدول می توان خانه ها را با هم ادغام یا جدا نمود. برای این کار باید از گزینه های “rowspan” و “columnspan” در HTML استفاده کرد. با استفاده از این روش می توان طراحی های شگفت انگیزی از یک جدول ارائه کرد.

 

 

منبع: www.entheosweb.com

]]> http://tarahan.com/%d8%ac%d8%af%d9%88%d9%84-html/feed/ 0 ایده های خلاقانه برای طراحی منوی سایت http://tarahan.com/%d8%a7%db%8c%d8%af%d9%87-%d9%87%d8%a7%db%8c-%d8%ae%d9%84%d8%a7%d9%82%d8%a7%d9%86%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%85%d9%86%d9%88%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%a7%db%8c%d8%af%d9%87-%d9%87%d8%a7%db%8c-%d8%ae%d9%84%d8%a7%d9%82%d8%a7%d9%86%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%85%d9%86%d9%88%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Sun, 28 Feb 2016 12:00:08 +0000 http://tarahan.com/?p=5987 […]]]> منوهای موجود در سایت ها دیگر لیست ها و فهرست های ساده ای محسوب نمی شوند بلکه به یکی از اساسی ترین بخش ها در طراحی سایت به شمار می روند. امروزه طراحان در تلاشند تا این منوها را جذاب تر و کاربردی تر طراحی نمایند؛ بدین ترتیب کاربران به راحتی قادر به جستجو در سایت می باشند. رنگ های تند و المان های متنوع طراحی در جلب توجه کاربران نقش مهمی داشته و طراحی های متعدد منوها، دسته بندی منوهای فرعی را تسهیل می نمایند.

در این قسمت، انواع منوها که در طراحی سایت ها بکار رفته اند معرفی و نمایش داده می شوند و ایده های خوبی برای طراحی منو در اختیار طراحان قرار می دهد.

منوی Mega Drop-Down

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

Picture 01 ایده های خلاقانه برای طراحی منوی سایت

منوهای Mega Flyout

منوهای Mega fly-out می توانند تعداد زیادی از لینک های زیر گروه را شامل شوند در حالی که طراحی کلی سایت را بهم نریخته و وجه کاربر را بخوبی جلب می نماید.

picture 02 ایده های خلاقانه برای طراحی منوی سایت

 منوهای اسلایدری Multi-Level

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

picture 03 ایده های خلاقانه برای طراحی منوی سایت

  منوهای عمودی

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

cool navigation menu ideas clip image026 ایده های خلاقانه برای طراحی منوی سایت

منوهای تصویردار

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

cool navigation menu ideas clip image028 ایده های خلاقانه برای طراحی منوی سایت

منوهای عمودی متحرک

در این طراحی، منو بصورت عمودی قرار گرفته است و با حرکت موس روی هر یک از منوها، هر یک از زیر منوها بگونه ای باز می شوند که انگار در حال رقص هستند. زمانی که بر روی آن ها کلیک می شود، محتوای مدنظر مانند اسلاید نمایش داده می شود.

cool navigation menu ideas clip image030 ایده های خلاقانه برای طراحی منوی سایت

ظاهر نامتعارف

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

cool navigation menu ideas clip image036 ایده های خلاقانه برای طراحی منوی سایت

 طراحی رنگ آمیزی

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

cool navigation menu ideas clip image038 ایده های خلاقانه برای طراحی منوی سایت

درجه بندی رنگ ها و جلوه های سایه

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

 

cool navigation menu ideas clip image042 ایده های خلاقانه برای طراحی منوی سایت

منبع: www.entheosweb.com

 

]]> http://tarahan.com/%d8%a7%db%8c%d8%af%d9%87-%d9%87%d8%a7%db%8c-%d8%ae%d9%84%d8%a7%d9%82%d8%a7%d9%86%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%85%d9%86%d9%88%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 برنامه نویسی چیست؟ (بخش اول) http://tarahan.com/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%86%db%8c%d8%b3%d8%aa-%d8%9f-1/ http://tarahan.com/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%86%db%8c%d8%b3%d8%aa-%d8%9f-1/#respond Sat, 27 Feb 2016 13:08:54 +0000 http://tarahan.com/?p=5970 […]]]>  مفاهیم بنیادین در برنامه نویسی: برنامه نویسی چیست؟

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

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

بدون کمک نرم افزارها یا برنامه ها، کامپیوتر غیر از “بله” یا “خیر” و اعداد ۱ و ۰ چیز دیگری متوجه نمی شوند. در نتیجه زبان برنامه نویسی بکار گرفته می شود تا دستورات لازم را به کامپیوترها بدهند. اما برای فهم بیشتر این زبان ها، برنامه دیگری نیز باید وجود داشته باشد که بدین ترتیب برنامه نویسان اقدام به طراحی مرورگرهای سایت نمودند. به این وسیله راحت تر می توان از زبان های برنامه نویسی مانند جاوااسکریپت استفاده کرده و کامپیوتر را براحتی کنترل نمود.

همانند زبان های گفتاری، زبان های برنامه نویسی از قوانین و کلمات کلیدی ویژه ای برخوردارند. یکی از این کلمات کلیدی در زبان برنامه نویسی “تابع (function)” است. این کلمه به کامپیوتر می گوید که کد برنامه نویسی از کجا آغاز می شود و چه کاری قرار است انجام شود.

آیا HTML و CSS برای برنامه نویسی بکار می روند؟

می دانیم که HTML و CSS برای ساختن صفحات وب بکار می روند. این سوال بارها پیش آمده است که اگر HTML به مرورگر نشان می دهد که چه کدهایی را نمایش دهد و CSS چگونگی نمایش کدها را تحت کنترل دارد، آیا می توان گفت استفاده از HTML و CSS خود نیز نوعی برنامه نویسی است؟ جواب، منفی است.

تفاوت اصلی بین کدنویسی (HTML و CSS) و برنامه نویسی (جاوا و جاوااسکریپت) این است که در برنامه نویسی می توان بر اساس آنچه که اتفاق می کند تصمیم گیری کرد. 

15996662264 4088cd1e53 o 300x300 برنامه نویسی چیست؟ (بخش اول)

معرفی برنامه نویسی شی گرا (Object Oriented Programming) 

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

OOP سبکی از برنامه نویسی است که در بسیاری از زبان های مهم امروزی از جمله جاوا، ++C، جاوااسکریپت و غیره مورد استفاده قرار می گیرد. بطور خلاصه، ساخت برنامه ها توسط OOP بدین ترتیب است که برنامه ها را به مجموعه ای از اشیای مجزا تقسیم کرده و سپس برای ساخت برنامه بر روی هر یک فعالیت هایی اعمال می کند. به عبارت دیگر، این اشیا خود مانند برنامه های کوچکی هستند که داخل برنامه بزرگ تری قرار می گیرند. در نتیجه، زمانی که شما با کمک OOP برنامه نویسی می کنید درحقیقت در حال ایجاد اشیای مجزایی هستید که با هم کار می کنند تا یک برنامه کلی را بسازند.

چرا انتخاب OOP؟

دلیل استفاده از سبک OOP صرفه حویی در زمان و هزینه هاست. نرم افزارهایی که بر اساس OOP هستند، به آسانی ساخته و حفظ می شوند.

از آنجایی که مقوله اصلی طراحی سایت است در نتیجه به برنامه نویسی صفحات وب با استفاده از جاوااسکریپت تمرکز می کنیم.

یک صفحه سایت از اشیایی تشکیل می شود که توسط جاوا اسکریپت ساخته می شوند. یکی از این اشیای اساسی، پنجره (کادر) است که پنجره مرورگر را نشان می دهد و بدین ترتیب راه هایی را برای تاثیرگذاری بر پنجره مرورگر توسط جاوا اسکریپت فراهم می کند. اشیا موجود در هر برنامه نیز از المان های دیگری تحت عنوان “توابع” تشکیل می شوند. در نتیجه، اساساً یک تابع کاری است که یک شی می تواند انجام دهد. اشیا می توانند توابع زیادی را اعمال کنند.

 

 منبع: www.how-to-build-websites.com

 

]]> http://tarahan.com/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%da%86%db%8c%d8%b3%d8%aa-%d8%9f-1/feed/ 0 طراحی فرم فرآیند ثبت نام http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%85-%d9%81%d8%b1%d8%a2%db%8c%d9%86%d8%af-%d8%ab%d8%a8%d8%aa-%d9%86%d8%a7%d9%85/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%85-%d9%81%d8%b1%d8%a2%db%8c%d9%86%d8%af-%d8%ab%d8%a8%d8%aa-%d9%86%d8%a7%d9%85/#respond Mon, 22 Feb 2016 13:33:25 +0000 http://tarahan.com/?p=5955 […]]]>

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

در ادامه، ۳ سایت معرفی می شوند که بهترین نمونه ها از فرم های فرآیند ثبت نام  را دارند.

۱. Slack

slack1 طراحی فرم فرآیند ثبت نام

سایت Slack از قانون طلایی ساده گرایی استفاده نموده است. علاوه براین، بازخوردهایی که کاربران برای انجام هر فعالیتی دریافت می کنند سریع و بدون اتلاف وقت است و بطور کلی تکمیل فرم ثبت نام شاید در ۵ دقیقه انجام شود.

۲. Cotton Bureau

CottonBureau طراحی فرم فرآیند ثبت نام

سایت Cotton Bureau به کاربران این قابلیت را می دهد تا برای ثبت نام فقط از آدرس ایمیل و یک رمز عبور استفاده نمایند و تنها زمانی که مایل به خرید از سایت باشند باید اطلاعات بیشتری را در اختیار سایت قرار دهند.

۳. Instacart

Instacart2 طراحی فرم فرآیند ثبت نام

جهت استفاده از سرویس خرید آنلاین از سایت Instacart، تنها کافی است کاربران با وارد کردن اطلاعاتی اندک گزینه ثبت را زده و از خدمات آن بهره مند شوند و بدین ترتیب، وارد صفحه اصلی سایت شده و می توانند خرید آنلاین خود را انجام دهند.

منبع: www.creativebloq.com

 

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%85-%d9%81%d8%b1%d8%a2%db%8c%d9%86%d8%af-%d8%ab%d8%a8%d8%aa-%d9%86%d8%a7%d9%85/feed/ 0 طراحی سایت (بخش پنجم) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-5/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-5/#respond Sun, 21 Feb 2016 15:24:05 +0000 http://tarahan.com/?p=5937 […]]]> در قسمت آخر مقالات طراحی سایت، مراحل اصلی راه اندازی سایت معرفی می شوند که بدین ترتیب می توان سایت را در اینترنت مورد استفاده قرار داد.

خلاصه فرآیند طراحی سایت – بخش پایانی

SEO tools طراحی سایت (بخش پنجم)

مرحله هشتم) ثبت نامه دامنه

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

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

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

چگونه می توان پی برد که دامنه مورد نظر از قبل انتخاب شده است؟

سریع ترین راه برای تشخیص این مطلب، تایپ نام دامنه در مرورگر است. بدین ترتیب می توان فهمید که آیا این دامنه استفاده شده است یا نه. این روش همیشه کاربردی نیست چرا که بسیاری از دامنه ها خریداری شده اند ولی سایتی ندارند.

بهترین روش مراجعه به کسی که کار ثبت دامنه را انجام می دهد. این افراد فرمی را در اختیار شما قرار می دهند که بوسیله آن می توان نام های دامنه در دسترس را چک کرد.

مرحله نهم) پیدا کردن یک شرکت هاستینگ: در یک هاست بدنبال چه چیزی باید باشیم؟

امروزه، هاستینگ وب سایت ها هزینه کمتری نسبت به گذشته دارند. بنابر نوع سایت این هزینه های می توانند بسیار متفاوت باشند.

چه عواملی می توانند در هزینه هاستینگ موثر باشند؟

  • ترافیک: هر چه میزان ترافیک سایت بیشتر باشد ماهانه هزینه بیشتری برای شما خواهد داشت.
  • ویژگی ها و یا خدمات بیشتر: مبلغ هاست به فضای مورد استفاده نیز بستگی دارد. چنانچه شما بخواهید برای سایت خود از پایگاه داده ها استفاده نمایید یا نیاز به حساب های متعدد ایمیل دارید، فضای بیشتری برای ذخیره سازی فایل های خود می خواهید و همین امر باعث بالا رفتن هزینه هساتینگ می شود.

در انتها، کاری که باید انجام داد انتخاب شرکت هاستینگی است که می تواند بهترین خدمات را به شما ارائه نماید. همیشه ارزان ترین خدمات مناسب نیستند ولی شاید بدرد کار شما بخورند.

مرحله دهم) آپلود سایت روی سرور شرکت هاستینگ

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

چند نکته:

۱. حجم صفحات وب کم باشد.

۲. محتوای عناوین با واضح و مشخص باشد.

۳. پاراگرف های کوتاه انتخاب کنید.

۴. اطلاعات تماس باید به راحتی در دسترسی باشند.

۵. ساختار و ظاهر صفحات وب را ثابت نگه دارید.

۶. در تمامی صفحات گزینه “خانه” را قرار دهید تا کاربران به راحتی به صفحه اول سایت بازگردند.

۷. اظمینان داشته باشید که همیشه زیر لینک ها خط کشیده شده اند.

۸. لوگوی شرکت باید در تمامی صفحات استفاده شود.

 

منبع: www.how-to-build-websites.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-5/feed/ 0 طراحی سایت (بخش چهارم) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-4/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-4/#respond Sun, 21 Feb 2016 13:04:38 +0000 http://tarahan.com/?p=5932 […]]]> در قسمت قبل، تا پنج مرحله از طراحی سایت آموزش داده شدند. در این بخش، به بررسی مراحل ششم و هفتم فرآیند طراحی سایت می پردازیم.

خلاصه فرآیند طراحی سایت – ادامه

مرحله ششم) ساخت وب سایت

در این مرحله می توانید ساخت صفحات وب را آغاز کنید. بدین ترتیب:

۱. برای ساخت هر صفحه وب اقدامات مراحل ۱ تا ۵ را انجام دهید.

۲. صفحات وب را به هم لینک دهید.

از این مرحله به بعد می توانید بطور امتحانی طراحی سایت خود را آغاز کنید.

مرحله هفتم) انتخاب نام دامنه

زمانی که ساخت سایت به اتمام رسید، نیاز به تعیین نام دامنه دیده می شود.

تمامی وب سایت ها به یک اسم دامنه احتیاج دارند و انتخاب نام دامنه بر چگونگی یافتن سایت شما توسط کاربران موثر است؛ بنابراین، در این مرحله دقت نمایید. در این مقوله نکاتی وجود دارند که توجه به آن ها حائز اهمیت می باشد.

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

۲. موتورهای جستجو مانند گوگل بدنبال المان های متعددی از سایت شما می گردند و مشخص می کنند که سایت شما در چه زمینه ای هستند. یکی از همین عناصر کلیدی نام دامنه است. گوگل بدنبال کلمات کلیدی در نام دامنه می گردد و به گوگل بوت (نرم افزار اتوماتیک گوگل) کمک می کند تا سایت شما را دسته بندی نماید.

در اینجا یک سوال باقی می ماند و آن هم این است که آیا نام دامنه باید مشابه نام کسب و کار باشد؟ جواب، منفی است. هیچ الزامی برای مشابه بودن نام دامنه و کسب و کار وجود ندارد.

domain reg 300x263 طراحی سایت (بخش چهارم)

منبع: www.how-to-build-websites.com

 

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-4/feed/ 0 طراحی سایت (بخش سوم) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-3/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-3/#respond Sun, 21 Feb 2016 11:33:40 +0000 http://tarahan.com/?p=5927 […]]]> در مقاله قبل، به دو مرحله کلی از فرآیند طراحی سایت اشاره شد و اینجا به ادامه آموزش طراحی سایت می پردازیم.

خلاصه فرآیند طراحی سایت – ادامه

process طراحی سایت (بخش سوم)

مرحله سوم) نوشتن متن برای سایت

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

مرحله چهارم) انتخاب یک چیدمان ساده و کلاسیک که در تمامی صفحات مورد نیاز باشد

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

مرحله پنجم) انتخاب شمای رنگی و فونت ها برای طراحی سایت

در این مرحله نوع فونت و رنگ های پایه انتخاب می گردند. سبک مورد استفاده باید متناسب با موضوع سایت باشد. بعنوان مثال: رنگ صورتی اصلا برای فروشگاه نرم افزار مناسب نیست. نکته حائز اهمیت این است که پیش از آغاز طراحی سایت، باید سبک موردنظر را انتخاب کرد چراکه ممکن است مجدداً مجبور به طراحی صفحات شوید.

منبع: www.how-to-build-websites.com

 

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-3/feed/ 0 طراحی سایت (بخش دوم) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-2/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-2/#respond Sun, 21 Feb 2016 10:00:27 +0000 http://tarahan.com/?p=5919 […]]]> در بخش قبل، در مقوله طراحی سایت تا حدی با برخی مفاهیم از قبیل انواع آدرس ها آشنا شدیم. در ادامه، به توضیح کامل تر این مباحث می پردازیم.

آدرس Absolute در مقابل آدرس Relative؛ طراحی سایت

آدرس Relative

آدرس Relative یک آدرس جزئی است و مربوط به صفحه ای است که لینک شما در آن قرار داده شده است. درنتیجه، اگر شما از صفحه index.html سایت خود به صفحه bookcase.html لینک داده شوید آدرس Relative مانند زیر خواهد بود:

products/bookcases.html

و تگ این لینک بدین ترتیب خواهد بود:

<a href="products/bookcases.html">Check out our bookcases!</a>

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

با مثالی دیگر، این مطلب را بیشتر توضیح می دهیم:

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

<a href="contact.html">Contact us</a>

از آنجایی که صفحه contact.html هم سطح صفحه index.html است تنها باید اسم فایل html را در آدرس لینک آورد.

خلاصه فرآیند طراحی سایت

حال که با برخی از مفاهیم عمده طراحی سایت آشنا شدیم، می خواهیم در ۱۰ مرحله یک سایت ساخته و آن را در شبکه جهانی وب مورد استفاده قرار دهیم.

Web designe طراحی سایت (بخش دوم)

مرحله اول) تعیین هدف برای طراحی سایت

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

۱. آیا مایل به استفاده از پرداخت آنلاین و کارت اعتباری هستید؟

۲. آیا نیاز به سیستم خرید فروشگاهی برای ثبت سفارشات دارید؟

۳. چند آیتم از طریق سایت به فروش می رسد؟

مرحله دوم) نمودار ساختار یک وب سایت

یک نمودار ساده می تواند در تجسم وب سایت به شما و کاربرانتان کمک بزرگی کند. هیچ المان خاصی برای این نمودار نیاز نیست غیر از تعدادی کادر که می توانند نشان دهنده صفحات سایت باشند و یک سری خطوط که لینک بین صفحات را نمایش می دهند. علاوه براین، یک شمای هرمی برای نمایش سلسله مراتب سایت نیز بکار می رود.

منبع: www.how-to-build-websites.com

 

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-2/feed/ 0 طراحی سایت (بخش اول) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-1/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-1/#respond Sat, 20 Feb 2016 11:12:00 +0000 http://tarahan.com/?p=5910 […]]]> حال که اولین صفحه سایت خود را طراحی نمودید و از مفاهیم بنیادین این مقوله آگاهی کامل دارید، می توانید طراحی سایت خود را آغاز کنید.

معرفی: وب سایت چیست؟؛ طراحی سایت

یک وب سایت مجموعه ای از صفحاتی است که توسط لینک ها به هم متصل شده اند. در HTML، تگ بخصوصی بنام تگ “link” وجود دارد و به شکل زیر است:

<a href="..."></a>

مثالی از نحوه استفاده از این لینک در ادامه آورده شده است:

<a href=" http://www.sites.com ">Go to sites.com</a>

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

Absolute URL در مقابل Relative URL؛ طراحی سایت

برای لینک دادن از یک صفحه به صفحه دیگر در سایت خود، باید میان دو نوع آدرس انتخاب کنید: آدرس Absolute یا مطلق (کامل) و آدرس Realative یا نسبی (جزئی).

آدرس Absolute آدرس کاملی از صفحه است که براحتی از هر موقعیتی در اینترنت پیدا می شود. بعنوان مثال: چنانچه صفحه ای تحت عنوان contact.html در روت سایت وجود داشته باشد و نام دامنه سایت www.yoursite.com باشد، آدرس absolute صفحه مذکور http://www.yoursite.com/contact.html می شود.

url طراحی سایت (بخش اول)

در این جا اصطلاح دیگری که بکار برده می شود “روت” است.

فایل ها (صفحات، تصاویر و غیره) که سایت شماره را تشکیل می دهند در فولدرهایی سازماندهی می شوند. هاست، در سرور فضایی را در اختیار شما قرار می دهد که می توانید فایل های سایت خود را درون آن قرار دهید. این فضایی که به شما اختصاص داده می شود همان “روت” در سایت نامیده می شود و بدین معناست که هر فایلی در این فولدر از قبیل فایل های html، تصاویر و سایر فولدرها مستقیماً توسط نام دامنه شما قابل دسترسی می باشد.

منبع: www.how-to-build-websites.com

 

 

 

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-1/feed/ 0 طراحی صفحه سایت (بخش سوم) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-3/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-3/#respond Sat, 20 Feb 2016 07:12:08 +0000 http://tarahan.com/?p=5896 […]]]> اولین طراحی صفحه سایت (بخش سوم)

در مقالات قبلی به معرفی برخی اصطلاحات اولیه مربوط به طراحی سایت پرداختیم و در ادامه مباحث مرتبط با طراحی صفحه سایت، به توضیح بیشتر مراحل ساخت صفحات HTML می پردازیم.

مرحله اول: نوشتن کدهای ‌HTML؛ساخت صفحه HTML در طراحی سایت

در ویرایشگر متن Notepad متن زیر را تایپ نمایید (برای ایجاد فایل html در سیستم مک از PDF استفاده نمایید):

14 طراحی صفحه سایت (بخش سوم)

مرحله دوم: ذخیره سازی فایل در قالب HTML؛ ساخت صفحه HTML در طراحی سایت

فایل HTML را بوسیله ویرایشگر متن ذخیره نمایید و نام آن را webPage.html انتخاب نمایید.

البته برای انتخاب نام با توجه به چهار قانون زیر می توانید هر اسمی را انتخاب کنید:

۱. در اسامی صفحات وب نباید فاصله وجود داشته باشد مانند: web page.html

۲. اسم باید به فرمت html. یا htm. باشد؛ با استفاده از این فرمت، به کامپیوتر اعلام می کنیم که این فایل یک صفحه سایت است و برای مشاهده آن باید از مرورگر یا نرم افزاری ای قادر به خواندن صفحه وب باشد، استفاده کرد.

۳. از علائمی مانند $, %,^,& در نام صفحه استفاده نکنید و تنهابه حروف و اعداد اکتفا نمایید.

۴. در Notepad، فایل را به فرمت UTF-8 ذخیره نمایید.

فایل ایجاد HTML در سیستم Mac OSX

مرحله سوم: مشاهده صفحه خود؛ ساخت صفحه HTML در طراحی سایت

در این مرحله، شما قادر خواهید بود که روی صفحه خود دوبار کلیک نمایید یا با رفتن به منوی “فایل” و  انتخاب گزینه “باز کردن فایل” صفحه خود را انتخاب نموده و در مرورگر مشاهده نمایید. چنانچه نمی توانید صفحه خود را ببینید، فایل HTML نوشته شده را با نمونه داده شده در بالا مقایسه کنید و روند نوشتن کدها را دوباره تکرار نمایید را اشکال کار برطرف شود. صفحه نهایی در اینجا آورده شده است که می توانید صفحه خود را با آن مقایسه نمایید.

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

منبع: www.how-to-build-websites.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-3/feed/ 0 طراحی صفحه سایت (بخش دوم) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-%db%b2/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-%db%b2/#respond Thu, 18 Feb 2016 21:01:15 +0000 http://tarahan.com/?p=5875 […]]]> اولین طراحی صفحه سایت (بخش دوم)

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

جدول تگ ها؛ طراحی صفحه سایت

همانطور که در مقاله قبلی مشاهده شد، تگ های HTML بصورت جفت ظاهر می شوند. در HTML هم تگ آغازگر < نام تگ> وجود دارد و هم تگ پایانی </نام تگ>. تنها تفاوتی که در این دو تگ دیده می شود، وجود slash است.

tagImageDiagram طراحی صفحه سایت (بخش دوم)

مثال هایی از تگ های HTML:

html طراحی صفحه سایت (بخش دوم)

تگ های HTML تنها برای متون بکار نمی روند بلکه سایر اجزای تشکیل دهنده صفحه سایت را از قبیل انیمیشن، ویدیو، فایل های صوتی و حتی برنامه های چند رسانه‌ای را نیز شامل می شود.

مقایسه کد HTML و صفحه سایتی که بوسیله آن بوجود می آید.

در اینجا نمونه ای از صفحه اصلی سایت و کد HTML آن آورده شده است که با مقایسه این دو می توانید محل قرارگیری تگ ها و نحوه عملکرد آن ها را یاد بگیرید.

نمونه صفحه سایت 

نمونه کد HTML

ساختار یک صفحه HTML؛ طراحی صفحه سایت

یک صفحه HTML به دو بخش عمده تقسیم می شود:

عنوان

در یک صفحه HTML، قسمت عنوان (<head>) شامل داده های بنیادینی می باشد که بطور کلی در صفحه سایت نمایش داده نمی شود. بااین وجود، بخش عنوان می تواند در نحوه نمایش صفحه سایت موثر باشد.

متن

بخش متن (<body>) شامل مطالبی است که در صفحه اصلی سایت دیده می شوند. این مطالب همان متون، تصاویر و فیلم هایی هستند که کاربران مشاهده می کنند. این بدان معناست که تگ ها تمام این مطالب را فرمت می کنند.

همانطور که مشاهده کردید هر دو بخش عنوان و متن در صفحه HTML با تگ های مربوط به خودشان نوشته می شوند: (<head> و <head/>) و (<body> و <body/>)

حال سوال اینجاست زمانی که تگ متن بخش متن و تگ عنوان قسمت عنوان صفحه را تشکیل می دهد، پس خود صفحه HTML چگونه ایجاد می شود؟

تگ (<html> و <html/>) اصلی ترین تگ است که اولین و آخرین تگ استفاده شده در زمان نوشتن صفحه است. هر صفحه ای باید با این تگ آغاز شده و در نهایت به پایان برسد در غیر این صورت، مرورگر قادر به نمایش دادن صفحه نخواهد بود. سایر تگ ها با توجه به ضرورت استفاده، می توانند بطور اختیاری استفاده شوند.

منبع: www.how-to-build-websites.com

 

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-%db%b2/feed/ 0 طراحی صفحه سایت (بخش اول) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-1/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-1/#respond Wed, 17 Feb 2016 09:33:24 +0000 http://tarahan.com/?p=5866 […]]]> اولین طراحی صفحه سایت (بخش اول)

در مقالات قبلی به معرفی برخی اصطلاحات اولیه مربوط به طراحی سایت پرداختیم. در ادامه، به بررسی مراحل طراحی صفحه سایت می پردازیم.

برای طراحی صفحه سایت ۳ روش به شما پیشنهاد می شود.

web1 طراحی صفحه سایت (بخش اول)

۱. بکارگیری قالب های از پیش طراحی شده: قالب طراحی سایت چیست؟

قالب های طراحی سایت از پیش ساخته شده اند و قابلیت ایجاد تغییرات مرتبط با فعالیت هر شرکت را دارند. این قالب ها در فرمت های فوتوشاپ و HTML وجود دارند و اغلب مواقع سازگار با ویرایشگرهای HTML از قبیل Dreamweaver و FrontPage و GoLive است.

قالب های طراحی سایت بسیار پرکاربرد هستند؛ حتی برخی از طراحان مجرب برای افزایش سرعت کار خود نیز از این قالب ها استفاده می کنند. علاوه براین، افرادی که دانش زیادی از HTML و طراحی سایت ندارند نیز براحتی می توانند از این قالب ها استفاده کنند و کار خود را تکمیل نمایند.

۲. استفاده از ویرایشگر HTML مانند NetObjects Fusion یا Dreamweaver:

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

۳. کدنویسی HTML در ویرایشگر متن مانند Notepad:

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

تگ HTML چیست؟

تگ های HTML، متون فرمت شده ای هستند که علائمی را برای خواندن و تفسیر توسط مرورگر سایت ارائه می کنند. این علائم مشخص می کنند که مرورگر چه چیزهایی را در سایت نمایش دهد. تگ ها اطراف و داخل متون و تصاویری قرار می گیرند که می خواهید در سایت شما نمایش داده شوند. HTML متشکل از مجموعه ای تگ هاست که هر طراحی می تواند برای ساخت سایت خود از آن ها استفاده نماید. همانطور که پیش تر ذکر شد، تگ ها ساختار ویژه ای دارند. زمانی که مرورگر صفحه HTML را می‌خواند، بطور خودکار تمایز بین تگ ها و متون معمولی را تشخیص می دهد. غالباً، تگ ها کلمات یا مخفف کلماتی است که داخل پرانتزهای شکسته قرار <> می گیرند. بعنوان مثال، چنانچه بخواهیم متن را پررنگ (bold) نماییم، تگ آن در HTML به صورت زیر نوشته می شود:

<b>This text will be bolded</b>

منبع: www.how-to-build-websites.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-1/feed/ 0 مفاهیم بنیادین طراحی سایت (بخش سوم) http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-3/ http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-3/#respond Tue, 16 Feb 2016 15:35:39 +0000 http://tarahan.com/?p=5857 […]]]> در زمینه طراحی سایت، اصطلاحات و مفاهیم ویژه ای وجود دارند که دانستن آن ها به انجام هرچه سریع تر و بهتر این فرآیند کمک می کند.

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

راهکاری مقرون بصرفه

برخی از افراد تمایلی به خرید یک دامنه یا پرداخت برای هاستینگ ندارند چراکه هدفشان راه اندازی یک سایت شخصی بوده و صرفاً برای تمرین یا تفریح اقدام به طراحی سایت می نمایند. برای چنین افرادی این امکان وجود دارد که سایت خود را با استفاده از دامنه های فرعی راه اندازی کنند. دامنه فرعی یک دامنه است که بخشی از یک دامنه دیگر است. بعنوان مثال اگر سایتی تحت عنوان sites.com هاستینگ دامنه فرعی داشته باشد آدرس سایت شما این خواهد بود:

www.sites.com/yourWebsite/

یا

http://yourWebsite.killersites.com

domain registration مفاهیم بنیادین طراحی سایت (بخش سوم)

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

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

نکته آخر اینکه گاهاً شنیده می شود که خدمات هاستینگ رایگانی نیز وجود دارند که دامنه های شما را هاست نموده و علاوه براین در صفخات سایت شما خبری از آگهی های تبلیغاتی نخواهد بود. اگرچه اعتماد کردن به همچین خدماتی می تواند آسیب جدی به سایت و کسب و کار شما بزند اما اگر خوش شانس باشید می توانید شرکت هایی را پیدا کنید که خدمات هاستینگ رایگان را بخوبی ارائه می دهند.

انتقال فایل های سایت روی سرور؛ طراحی سایت

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

 برنامه های FTP رایگان و متعددی وجود دارند که برای انتقال فایل ها مورد استفاده قرار می گیرند و بسیاری از ویرایشگرهای HTML و برنامه های طراحی سایت مانند Dreamweaver قابلیت FTP و انتقال فایل دارند. علاوه براین، مرورگر Internet Explorer 5 و نسخه های جدیدتر آن نیز قابلیت انتقال فایل را دارند.

 منبع: www.how-to-build-websites.com

]]> http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-3/feed/ 0 مفاهیم بنیادین طراحی سایت (بخش دوم) http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-2/ http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-2/#respond Tue, 16 Feb 2016 14:31:45 +0000 http://tarahan.com/?p=5853 […]]]> در زمینه طراحی سایت، اصطلاحات و مفاهیم ویژه ای وجود دارند که دانستن آن ها به انجام هرچه سریع تر و بهتر این فرآیند کمک می کند.

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

راه اندازی وب سایت در شبکه؛ طراحی سایت

با توجه به جزئیات ذکر شده در مقاله قبل، حال زمان یادگیری مراحل راه اندازی سایت است:

۱. ثبت دامنه

۲. اجاره فضای سرور

۱. ثبت دامنه

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

تفاوت بین com. و net. و org. و .etc در چیست؟

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

dotcom مفاهیم بنیادین طراحی سایت (بخش دوم)

۲. اجاره فضای سرور برای هاستینگ وب سایت

برای مدیریت سایت در شبکه جهانی وب نیاز به اجاره فضایی در سرور وجود دارد که غالباً هاست نامیده می شود. شرکت هایی که چنین خدماتی ارائه می کنند نیز هاستینگ نامیده می شوند.

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

 

 منبع: www.how-to-build-websites.com

 

]]> http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-2/feed/ 0 مفاهیم بنیادین طراحی سایت (بخش اول) http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Tue, 16 Feb 2016 12:44:58 +0000 http://tarahan.com/?p=5844 […]]]>  معرفی اصطلاحات دامنه، سرور و هاستینگ؛ طراحی سایت

در زمینه طراحی سایت، اصطلاحات و مفاهیم ویژه ای وجود دارند که دانستن آن ها به انجام هرچه سریع تر و بهتر این فرآیند کمک می کند.

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

شبکه چیست؟

در مقوله طراحی سایت شبکه یکی از اصطلاحات پرکاربرد و رایج است. بطور کلی شبکه، مجموعه ای از کامپیوترهایی است که از طریق خطوط تلفن، سیگنال های ماهواره ای، کابل هاو سایر مکانیسم های انتقال داده به هم متصل هستند (به روش های جابه جایی اطلاعات از نقطه A به B و بعد به C را مکانیسم های انتقال داده می گویند.)

کامپیوترهایی که شبکه را شکل می دهند می توانند همیشه یا بطور مقطعی با هم در ارتباط باشند. چنانچه همیشگی به هم مرتبط باشند “سرور” نامیده می شوند و تنها تفاوتی که با سایر سیستم های کامپیوتری دارند این است که نرم افزار ویژه ای بنام “سرور” روی آن ها نصب است.

Servers مفاهیم بنیادین طراحی سایت (بخش اول)

عملکرد نرم افزار یا برنامه سرور چیست؟

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

چگونه یک جستجوگر شبکه می تواند یک وب سایت را پیدا کند؟

جواب کوتاه این است: با تایپ کردن URL یا به عبارت دیگر، آدرس وب سایت. اما نکته اصلی این است که چگونه می توان یک آدرس رسمی برای وب سایتی در نظر گرفت که به کمک آن بتوان کل سایت را پیدا کرد؟

ثبت نام دامنه

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

چرا ثبت نام یک دامنه هزینه بر است؟

 چنانچه خواهان داشتن آدرس یا نام دامنه مخصوص به خود در شبکه هستید باید هزینه ای را سالیانه پرداخت نمایید تا نام مذبور برای شما ثبت شود. ثبت هر دامنه می‌تواند سالانه تا دو ساله باشد. دلیل پرداخت هزینه بروزرسانی لیست اسامی دامنه ها در کل دنیاست.

منبع: www.how-to-build-websites.com

]]> http://tarahan.com/%d9%85%d9%81%d8%a7%d9%87%db%8c%d9%85-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 رنگ‌ ها در طراحی سایت http://tarahan.com/%d8%b1%d9%86%da%af-%d9%87%d8%a7-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%b1%d9%86%da%af-%d9%87%d8%a7-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Tue, 16 Feb 2016 10:25:01 +0000 http://tarahan.com/?p=5835 […]]]> امروزه استفاده از رنگ‌ ها در طراحی سایت نقش بسیار مهمی دارد بخصوص اینکه طراحان در حال حاضر از ترکیب رنگ های روشنی استفاده می کنند که تا سال ها قبل خیلی رواج نداشت. نتیجه حاصل، خلق طرح هایی با رنگ های زیبا و جذاب است که هم‌خوانی دقیق و مناسبی با متن و گرافیک های بکار رفته در سایت دارد. در این مقاله، به بررسی تکنیک های بکار بردن رنگ‌ ها در طراحی سایت می پردازیم که برگرفته از مطالب ذکر شده در کتاب Flat Design & Colours می باشند.

طراحی داخلی و مد

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

image01 رنگ‌ ها در طراحی سایت

به همین ترتیب، می توان در دنیای دیجیتال نیز از ترکیب های رنگی متعددی استفاده کرد. در حقیقت، تمام هدف بکار بردن رنگ ها در طراحی سایت برقراری ارتباط با کاربران است. بطور کلی، ترفندهای رنگی در دنیای حقیقی و مجازی کاملاً مرتبط با همین دلیل هستند.

رنگ های Flat

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

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

شمای رنگی یکنواخت

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

image051 رنگ‌ ها در طراحی سایت

استفاده از شمای رنگی یکنواخت یکی از روش های ساده ولی موثر برای طراحی سایت و بکارگیری رنگ های متعدد است بدون اینکه طراح را دچار دردسر متناسب‌سازی رنگ ها نماید.

کنتراست بالای رنگ

 کنتراست بالای رنگ ها بدین معنی است که رنگ بکار رفته تفاوت زیادی با پس زمینه داشته باشد. در طراحی های مینیمالیسم، غالباً رنگ ها روشن و تیره در کنار هم دیده می‌شوند که این امر از اساسی‌ترین نکات در طراحی سایت هاست.

image04 رنگ‌ ها در طراحی سایت

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

ترکیب رنگ ها در طراحی سایت 

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

صورتی: روابط عاشقانه، جوانی و اطمینان

قرمز: عشق، شور و اشتیاق، خطر و اضطرار

زرد: تفریح، خوش بینی، شادی و احتیاط

نارنجی: گرمی، جاه طلبی، شور و شوق و خلاقیت

سبز: طبیعت، شانس، رشد و امنیت

آبی: سازش، آرامش، اعتماد و افتخار

بنفش: ثروت، قدرت، معنویت و آرامش

برای دانلود کتاب Flat Design & Colours به لینک زیر مراجعه نمایید:

دانلود کتاب

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%b1%d9%86%da%af-%d9%87%d8%a7-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 ترفندهای مهم برای طراحی سایت (بخش دوم) http://tarahan.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%87%d8%a7%db%8c-%d9%85%d9%87%d9%85-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%87%d8%a7%db%8c-%d9%85%d9%87%d9%85-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Mon, 15 Feb 2016 12:37:33 +0000 http://tarahan.com/?p=5822 […]]]> در حال حاضر وب سایت‌های متعددی هستند که برای کسب وکارها و صنایع مختلف طراحی می‌شوند اما فقط تعداد محدودی هستند که از موفقیت خوبی برخوردارند و این امر مرهون طراحی صحیح و مدرن آن‌هاست. ترفندهای مختلفی برای طراحی سایت وجود دارند که می توانند تاثیرات مثبتی بر عملکرد آن ها داشته باشد. در مقاله قبلی، برخی از ترفندهای مهم برای طراحی سایت به شما پیشنهاد شدند و در این مقاله به ادامه ترفندها می‌پردازیم.

۴) طراحی متریال: جایگزینی قوی برای طراحی Flat

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

6 web design trends awwwards image11 ترفندهای مهم برای طراحی سایت (بخش دوم)

طراحی متریال دیدگاه مینیمالیستی دارد و این یکی از ویژگی‌های بارز این نوع زبان طراحی است. البته میان طراحی متریال و Flat شباهت های چشمگیری وجود دارند ولی تفاوت بارز میان این دو طراحی استفاده از عمق و سایه برای واقعی‌تر جلوه دادن تصاویر است.

پیش از این، اغلب طراحی‌های متریال برای طراحی نرم‌افزارها بکار گرفته می‌شدند تا اینکه گوگل در سال گذشته نوآوری کرده و نسخه‌ای از این سایت را به بازار معرفی نموده که مناسب برای طراحی سایت‌ها می‌باشد. این زبان از نظر طراحی UI و UX بسیار مطلوب بوده و سازگار با CSS، HTML و JavaScript است.

طراحی متریال وابسته به هیچ فریم ورکی نیست و درنتیجه طراحان می‌توانند از بسیاری از ابزار front-end برای طراحی سایت‌های خود استفاده نمایند.

۵) طراحی ریسپانسیو

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

Responsive Web Design435 ترفندهای مهم برای طراحی سایت (بخش دوم)

برای حصول اطمینان از کارکرد کامل و صحیح طراحی سایت ریسپانسیو، طراحان باید اصول زیر را رعایت کنند:

اجتناب از بارگذاری تصاویر با استفاده از Javascript و CSS بهمراه تگ display:none. این امر موجب دانلود تصاویر شده و درنتیجه حجم سایت را افزایش می‌دهد.

  • استفاده از تصاویر ریسپانسیو
  • استفاده از RESS یا Responsive and Server Side (طراحی ریسپانسیو با کامپوزیت‌های سمت سرور)
  • تست عملکرد در طی فرآیند کار برای سنجش و بهینه سازی هر سایت

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

۶) طراحی Flat   

طراحی Flat  یکی از طراحی هایی است که با دیدگاه‌های نوین در طراحی سایت مانند مینیمالیسم، طراحی سایت ریسپانسیو و طراحی متریال سازگار است.

6 web design trends awwwards image01 ترفندهای مهم برای طراحی سایت (بخش دوم)

در طراحی Flat، عوامل زیر بخوبی تاثیر مثبتی دارند:

سایه های بلند: عمق بیشتر به طراحی های Flat می دهند.

شمای رنگ‌های روشن: فریم ورک‌ها و قالب‌های رایج طراحی UI منجر به استفاده از رنگ‌های متنوع و روشن در طراحی‌ سایت‌ ها می‌شود.

تایپوگرافی ساده: سبک‌های ساده تایپی باعث می‌شوند طراحی Flat خوانا باشد.

مینیمالیسم: منجر به کاهش المان‌ها شده و نتیجتاً طراحی ساده و زیبایی را پیش چشم کاربران قرار می‌دهد.

 منبع: www.awwwards.com

]]> http://tarahan.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%87%d8%a7%db%8c-%d9%85%d9%87%d9%85-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 ترفندهای مهم برای طراحی سایت ریسپانسیو(بخش اول) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88/#respond Mon, 15 Feb 2016 07:39:49 +0000 http://tarahan.com/?p=5806 […]]]> در حال حاضر وب سایت‌های متعددی هستند که برای کسب وکارها و صنایع مختلف طراحی می‌شوند اما فقط تعداد محدودی هستند که از موفقیت خوبی برخوردارند و این امر مرهون طراحی صحیح و مدرن آن‌هاست. ترفندهای مختلفی برای طراحی سایت وجود دارند که می توانند تاثیرات مثبتی بر عملکرد آن ها داشته باشد.در این مقاله، برخی از ترفندهای مهم برای طراحی سایت به شما پیشنهاد می‌شوند.

۱) افزایش چشمگیر الگوهای UI در طراحی سایت

یکی از معضلات همراه با طراحی سایت ها شباهت آن ها به یکدیگر است. البته مشکل تنها از طراحی نیست بلکه بدلیل حضور گسترده سایت‌های طراحی شده با وردپرس این اشتباهات به چشم می‌خورند. امروزه دیدگاه و نحوه استفاده کاربران از سایت ها با یکدیگر فرق کرده است و درنتیجه منجر به شکل‌گیری الگوهای UI رایج و متداولی شده است. انتظار طراحان از الگوهای UI ایجاد تجربه رضایت بخش برای کاربران است.

برخی از الگوها که باید با آن ها آشنایی داشته باشید عبارتند از:

منوی موبایلی/ همبرگری (Hamburger Menu): 

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

Style ترفندهای مهم برای طراحی سایت ریسپانسیو(بخش اول)

ایجاد حساب کاربری:

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

6 web design trends awwwards image06 ترفندهای مهم برای طراحی سایت ریسپانسیو(بخش اول)

استفاده از Long Scroll:

قرار دادن تمامی المان های مهم در بالای صفحه الگوی بسیار رایجی است. علاوه‌براین به لطف وسایل متنوع، کاربران با Long Scroll آشنایی کاملی دارند. این تکنیک امروزه بسیار مورد استفاده است بویژه زمانی که طراحان می‌خواهند یک سایت چند صفحه‌ای را با اسکرول بخش‌های مختلف نمایش دهند.

تصاویر با کیفیت بالا:

یکی از روش های سریع برای جلب توجه کاربران استفاده از تصاویر HD و با کیفیت بالاست. البته در برخی شرایط لود شدن این تصاویر با مشکلاتی نیز همراه بوده و وقت بیشتری می‌گیرند.

۲) انیمیشن‌های جذاب

اخیراً استفاده از انیمیشن ها بسیار رایج است چرا که بخوبی توجه و رضایت کاربران را جلب می کنند. در این قسمت ۳ تکنیک رایج برای کاربرد انیمیشن‌ها آورده شده است:

انیمیشن‌های بارگذاری:

این نوع از انیمیشن‌ها برای سرگرم کردن کابران در زمان بارگذاری سایت یا مطلبی هستند. این نوع انیمیشن‌ها برای طراحی‌های مینیمالیسم، سایت‌های تک‌صفحه‌ای و نمونه کارها استفاده می‌شوند.

6 web design trends awwwards image14 ترفندهای مهم برای طراحی سایت ریسپانسیو(بخش اول)

انیمیشن چرخشی:

دادن جلوه چرخشی به تصاویر ظاهری زیبا به آن‌ها داده و می تواند تاثیر مثبتی بر دیدگاه کاربران بگذارد.

6 web design trends awwwards image07 ترفندهای مهم برای طراحی سایت ریسپانسیو(بخش اول)

ویدیوها یا انیمیشن‌های پس‌ زمینه

یک پس‌زمینه ساده می‌تواند جلوه چشمگیری به سایت بدهد ولی در این زمینه نباید زیاده‌روی کرد چرا که ممکن است کاربر را دچار دردسر نماید.

6 web design trends awwwards image10 1 ترفندهای مهم برای طراحی سایت ریسپانسیو(بخش اول)

 ۳) Microinteractions (تعاملات میکرو) در طراحی سایت‌

Microinteractionها همیشه اطراف ما اتفاق می‌افتند، از خاموش کردن آلارم تلفن همراه گرفته تا لایک کردن یک تصویر در فیس بوک. هر کدام بدون لحظه ای تامل انجام می‌شوند. اینطور که به نظر می‌رسدهر روز ما با یکی از این Microinteractionها آغاز می‌شود و با گذشت زمان ورود Microinteractionها به نرم‌افزارها و وسایل دیجیتالی بیشتر و بیشتر می‌شود.

Microinteractionها در امور مختلفی وجود دارند:

۱. اشتراک وضعیت یا بازخورد

۲. مشاهده نتایج حاصل از عملکردهای مختلف

۳. کمک به کاربران در انجام امور مختلف

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

 منبع: www.awwwards.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88/feed/ 0 Moodle چیست؟ (بخش دوم) http://tarahan.com/moodle/ http://tarahan.com/moodle/#respond Sun, 14 Feb 2016 12:14:09 +0000 http://tarahan.com/?p=5795 […]]]> طراحی سایت آموزشی کار بسیار جالبی است اما نحوه ساخت و مدیریت یک سایت آموزشی جذاب و کارآمد خود بحث برانگیز است. Moodle یکی از سیستم های مدیریت آموزشی است که در این راستا ویژگی های منحصربفردی دارد. در مقاله قبل بطور خلاصه به معرفی این سیستم طراحی سایت پرداختیم و در این مقاله، به نحوه عملکرد Moodle اشاره می کنیم.

چگونه می توان یک سایت را در Moodle وارد کرد؟

کار با Moodle دقیقاً مشابه کار با CMS است.

moodle homepage Moodle چیست؟ (بخش دوم)

این برنامه با زبان PHP نوشته شده و به پایگاه داده‌های MySQL نیاز دارد درنتیجه، باید اطمینان حاصل کنید که host وب شما از این برنامه پشتیبانی می کند. حالا شما می‌توانید آغاز به کار کنید.

  • فایل های مدنظر را دانلود نمایید. به سایت Moodle.org مراجعه کرده و نسخه رسمی نرم افزار Moodle را دانلود کنید.
  • از نرم افزار FTP client استفاده کنید و تمام مختوای فولدر Moodle را در host وب آپلود کنید.
  • یک پایگاه داده ها ایجاد نمایید. قاعدتاً زمانی می توانید این کار انجام دهید که وارد سایت تامین کننده host خود باشید.
  • یک فهرست راهنما برای داده ها ایجاد نمایید. اگر از یک سرور اشتراکی استفاده نمی کنید فهرست راهنما باید مانند زیر باشد:
  • 12 Moodle چیست؟ (بخش دوم)
  • 22 Moodle چیست؟ (بخش دوم)
  • برنامه نصب Moodle را باز کنید. در این مرحله می‌توانید جداول پایگاه داده ها را بسازید تا سایت Moodle آغاز بکار نماید. برای این کار می توانید از برنامه نصب کننده مرورگر استفاده نمایید.
  • پس از اتمام نصب، باید اطمینان حاصل نمایید که تمامی صفحات بدرستی عمل می کنند.

اگرچه برای راه اندازی کامل Moodle تنظیمات بیشتری باید انجام اما همین راهکارها برای بکارگیری LMS کافی هستند.

بهترین تم های Moodle

در ادامه، گلچینی از تم های Moodle که در حال حاضر در ThemeForest قابل دسترسی هستند، آورده شده‌اند:

تم Lambda

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

lambda 300x297 Moodle چیست؟ (بخش دوم)

تم Marble

چنانچه تم و صفحه آرایی ساده مدنظر شماست Marble انتخاب خوبی است. این تم برای محیط های آموزشی بسیار کارآمد است. از ویژگی های بارز آن می‌توان به طراحی ریسپانسیو، آیکون های فونت، جداول، CSS اختصاصی و سایر موارد اشاره کرد.

marble Moodle چیست؟ (بخش دوم)

تم TIKLI

تم TIKLI یکی از تم هایی است که گزینه‌های متعددی برای صفحه‌آرایی و انتخاب رنگ‌ها دارد ومهم تر از بقیه اینکه قابلیت اعمال تغییرات بر المان‌های UI وجود دارد. درنتیجه می تواند گزینه کاملاً مناسبی برای محیط های آموزشی باشد.

tikli Moodle چیست؟ (بخش دوم)

تم Roshni

قابلیت صفحه آرایی ریسپانسیو، تم Roshni را انتخاب مناسبی برای بسیاری از آموزش های آنلاین می کند. از ویژگی های بارز آن می توان به پنل تنظیمات، انتخاب رنگ‌ها، header های متنوع، اسلایدرها، فونت های نامحدود و غیره اشاره کرد.

roshni moodle theme Moodle چیست؟ (بخش دوم)

 تم Nunforest
بعنوان آخرین گزینه، می توان تم Nunforest را معرفی کرد که یک تم ریسپانسیو است. اولویت طراحی این تم سادگی کار با آن است. همانند سایر تم ها، Nunforest نیز ویژگی های قابل توجهی دارد که عبارتند از: قابلیت اختصاصی سازی بدون کد، سبک های متنوع برای جداول، آیکون های شبکه اجتماعی، CSS اختصاصی و غیره.
nunforest Moodle چیست؟ (بخش دوم)
منبع: www.webdesign.tutsplus.com
]]> http://tarahan.com/moodle/feed/ 0 Moodle چیست؟ (بخش اول) http://tarahan.com/moodle-%da%86%db%8c%d8%b3%d8%aa-%d8%9f-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/ http://tarahan.com/moodle-%da%86%db%8c%d8%b3%d8%aa-%d8%9f-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/#respond Sun, 14 Feb 2016 11:58:16 +0000 http://tarahan.com/?p=5783 […]]]> طراحی سایت آموزشی کار بسیار جالبی است اما نحوه ساخت و مدیریت یک سایت آموزشی جذاب و کارآمد خود بحث برانگیز است. Moodle یکی از سیستم های مدیریت آموزشی است که در این راستا ویژگی های منحصربفردی دارد. در این مقاله بطور خلاصه به معرفی این سیستم طراحی سایت پرداخته و در مقاله بعدی، به نحوه عملکرد Moodle اشاره می کنیم.

Moodle چیست؟

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

سیستم های مدیریت آموزش

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

moodle website building Moodle چیست؟ (بخش اول)

Moodle چه کمک هایی می تواند بکند؟

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

این برنامه به اصطلاح open-source است یعنی به هر طریقی که کاربر بخواهد می تواند در آن تغییراتی ایجاد کند. اعضای این برنامه، پلاگین‌های متنوعی را توسعه داده‌اند که منجر به افزایش کارآیی آن می شوند. همچنین، این برنامه قابل استفاده به ۱۲۰ زبان می باشد در نتیجه نصب و استفاده از آن با مشکل همراه نخواهد بود.

ویژگی دوم Moodle این است که قابل استفاده برای کلاس ها با اندازه های متفاوت می باشد. به عبارت دیگر، این برنامه هم برای کلاس های کوچک با تعداد شاگردان اندک و هم برای سازمان های بزرگ متشکل از هزاران نفر بکار می رود. به همین دلیل است که Moodle نه تنها برای محیط های آموزشی سنتی استفاده می شود بلکه در تجارت، موسسات خیریه و نهادهای دولتی نیز بکار برده می شود. همچنین، این برنامه به لحاظ امنیتی بهینه‌سازی شده‌ است چراکه در ارتباط با داده ها و حریم خصوصی کاربران می باشد.

علاوه بر این اصول اولیه، Moodle ویژگی هایی دارد که بسیاری از نیازهای ضروری کاربران را مرتفع می سازند. این ویژگی ها عبارتند از:

کارتابل:

چنانچه پیش از این از سیستم مدیریت محتوا یا CMS استفاده نموده‌اید، پس با کارتابل آشنایی دارید. در Moodle کارتابل، یک صفحه کاملا اختصاصی است که به کاربران اجازه می دهد تا به آموزش آنلاین خود دسترسی کامل داشته باشند. کارتابل شامل دروس، فعالیت‌ها، تکالیف، نمرات و سایر اطلاعات می شود و در حقیقت، مانند یک کانون مرکزی است که بعد از قسمت ورود کاربران، اولین چیزی است که دیده می شود.

تقویم:

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

فعالیت ها:

این ویژگی براستی Moodle را از سایر برنامه‌ها متمایز می‌کند. درحقیقت قسمت فعالیت‌ها مجموعه‌ای از ماژول‌های نرم‌افزاری است که به کاربران کمک می‌کند تا تعاملات و مکالمات بین دانش‌آموزان و معلمان و همچنین میان دانش‌آموزان را گسترش داد.

ویژگی‌های دیگری که هم کاربران و هم ادمین ها می توانند استفاده کنند عبارتند از: مدیریت فایل، Google Drive ،Dropbx، ویرایشگر متن و پیگیری پیشرفت در امور.

مدیران و طراحان سایت نیز دسترسی های بیشتری در Moodle دارند از قبیل:

  •  مدیریت نقش کاربر
  • مدیریت پلاگین ها
  • یکپارچه سازی نرم افزارهای خارجی
  • دسترسی به گزارش ها و ورودی ها

 

منبع: www.webdesign.tutsplus.com

]]> http://tarahan.com/moodle-%da%86%db%8c%d8%b3%d8%aa-%d8%9f-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/feed/ 0 خلق تصاویر GIF در فوتوشاپ http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-gif-%d8%af%d8%b1-%d9%81%d9%88%d8%aa%d9%88%d8%b4%d8%a7%d9%be/ http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-gif-%d8%af%d8%b1-%d9%81%d9%88%d8%aa%d9%88%d8%b4%d8%a7%d9%be/#respond Sat, 13 Feb 2016 21:51:00 +0000 http://tarahan.com/?p=5766 […]]]> امروزه پسوند سه حرفی GIF کاربرد فراوانی دارد. اصطلاح GIF مخفف عبارت Graphics Interchange Format  یا قالب مبادله گرافیک می باشد و در حقیقت مشخص کننده تصاویر گرافیکی ثابت یا متحرک می باشد. بسیاری از مواقع تصاویر GIF جلوه ای زیبا به طراحی‌های ما می دهند. بنابراین، در این مقاله می خواهیم نحوه ایجاد تصاویر GIF در فوتوشاپ را توضیح دهیم.

۱) اندازه و رزولوشن تصاویر GIF: در ابتدای کار باید اندازه و رزولوشن فایل را انتخاب کنیم. از آنجایی اندازه های متنوعی برای تصاویر وجود دارند، بهترین و رایج ترین انتخاب می‌تواند ۴۶۸*۸۰ پیکسل و رزولوشن ۷۲dpi باشد.

banners step1 خلق تصاویر GIF در فوتوشاپ

۲) ایجاد تغییرات لازم: پس از اینکه لایه های متعدد برای هر اسلاید ایجاد شدند، می تواند با استفاده از قسمت Menu گزینه view را انتخاب کرده و بعد به سراغ گزینه Animation بروید. برای اینکه انیمیشن از جذابیت بیشتری برخوردار باشد می توانید لایه های متنی را کپی کرده، تغییرات لازم را اعمال نموده و از برخی جلوه های تصویری استفاده نمایید تا بدین ترتیب نتایج زیبایی بدست آورید.

21 خلق تصاویر GIF در فوتوشاپ

۳) توالی تصاویر GIF: بر اساس مکان قرار گیری برخی از طراحان سایت ها نیاز دارند تا انیمیشن بعد از زمان معینی متوقف شود. گاهاً نیز اتفاق می افتد که تصویر برای همیشه از کار افتاده و دیگر تحرکی ندارد. برای جلوگیری از چنین مشکلاتی بهتر است چهارچوب زمانی را زیر هر اسلاید تنظیم نموده و فایل GIF نهایی را بصورت Save for Web ذخیره نمایید. درنهایت، این امکان وجود دارد که تنظیمات پایانی را پیش از ذخیره نمودن فایل تغییر داده و تنظیمات دلخواه خود را نهایی سازید.

banner step3 خلق تصاویر GIF در فوتوشاپ

 

 

]]> http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-gif-%d8%af%d8%b1-%d9%81%d9%88%d8%aa%d9%88%d8%b4%d8%a7%d9%be/feed/ 0 استفاده از CSS در تصاویر ۳D http://tarahan.com/%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-css-%d8%af%d8%b1-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-3d/ http://tarahan.com/%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-css-%d8%af%d8%b1-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-3d/#respond Sat, 13 Feb 2016 12:35:56 +0000 http://tarahan.com/?p=5739 […]]]> ایجاد ظاهر چرخشی با استفاده از CSS در تصاویر ۳D

یکی از موارد استفاده از ۳D خلق تصاویر سه بعدی است که با مشکلاتی از قبیل ویژگی های هندسی، ایحاد تحرک و ویژگی های پیچیده و متعدد CSS همراه است. این مسائل بسیار آزار دهنده هستند و تلاش بر این است که بتوان آن ها را مورد بررسی قرار داده و راه حلی برای آن ها پیدا کرد.

در این مقاله، تلاش بر این است تا استفاده از CSS در تصاویر ۳D جلوه ای چرخان ایجاد کرد.

مکعب ها دارای ۶ وجه هستند پس ما باید از ۶ المان استفاده کنیم. اینجا برای هر وجه یک تگ div ایجاد می کنیم و هر یک را با عنوان “cube” در یک container (عنصر دربرگیرنده تگ) قرار می دهیم.

11 استفاده از CSS در تصاویر 3D

برای ایجاد پرسپکتیو باید تمام تگ های بالا را در Container نامرئی دیگری نیز قرار دهیم. همانطور که در تصویر پایین می بینید این container  بعنوان یک بخش (section) تعریف می شود چراکه نیازی نیست همیشه از تگ div استفاده کنیم.

2 استفاده از CSS در تصاویر 3D

برای ساختن یک مکعب هر وجه را چرخانده و تغییر مکان می دهیم. در تصویر زیر توجه کنید که چگونه هر یک از وجوه را برای قرار دادن در جهت درست خود، می‌چرخانیم. در مرحله بعد، برای تغییر مکان آن ها از کد translate استفاده کرده و امکان جابه جایی را فراهم می کنیم.

3 استفاده از CSS در تصاویر 3D

برای افزودن رنگ، بهتر است از کد دستوری hsla استفاده کنیم چراکه به کمک آن می‌توان توالی زیبا و چشمگیری از سایه‌ها و رنگ‌ها را ایجاد کرده، درنهایت آن‌ها را کپی و ویرایش نمود.

4 استفاده از CSS در تصاویر 3D

 تا اینجا مکعبی داریم که اندازه آن مشخص نیست. این کار را می‌توان از طریق تنظیمات اندازه در container، تگ div مکعب و وجوه آن انجام داد.

5 استفاده از CSS در تصاویر 3D

 برای حصول اطمینان از کارکرد صحیح ۳D باید تنظیمات تبدیل را بدرستی انجام داد و این امر از اهمیت بالایی برخوردار است.

6 استفاده از CSS در تصاویر 3D

 اکنون زمان تنظیم پرسپکتیو فرا رسیده است. چنانچه بخواهیم یک عکس را متناسب با اصل آن حرکت دهیم، باید پرسپکتیو را برای تنظیم حاشیه تصویر در تمامی وجوه مورد بررسی قرار دهیم.

7 استفاده از CSS در تصاویر 3D

 در این مرحله می خواهیم مکعب با قرار گرفتن موس روی آن بچرخد. در نتیجه باید حالت معلق ماندن را بوسیله چرخش ۳D اضافه کنیم. چرخش خودکار مکعب تمامی وجوه آن را می چرخاند.

8 استفاده از CSS در تصاویر 3D

 با انجام این دستورات و اعمال کدهای بالا، می توان با استفاده از CSS در تصاویر ۳D حالت چرخشی را ایجاد کرد.

منبع : www.webdesignermag.co.uk

]]> http://tarahan.com/%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-css-%d8%af%d8%b1-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-3d/feed/ 0 ۵ روش برای تسریع طراحی با UI Kit http://tarahan.com/kit/ http://tarahan.com/kit/#respond Wed, 10 Feb 2016 23:15:28 +0000 http://tarahan.com/?p=5710 […]]]> اغلب مواقع طراحان با مهارت های مختلف نمی توانند ایده های خلاقانه خود را به اجرا بگذارند چرا که صرف زمان طولانی برای فاز برنامه ریزی در دنیای پرسرعت امروز به ایده های شما آسیب وارد می کند. یکی از گزینه های پیشنهادی استفاده از UI Kit است که به شما کمک می کند تا مانند قطعات لوگو، براحتی مراحل مختلف کار طراحی را کنار هم قرار داده و به سرعت نمونه اولیه یا پروتوتایپ پروژه خود را بسازید. در این مقاله بیشتر با UI Kit ها و عملکرد آن ها آشنا می شویم.

اجزای سازنده یک طراحی

UI Kit ها مجموعه بنیادین عناصری هستند که به شما کمک می‌کنند تا ارائه مناسبی از محصول نهایی خود داشته باشید. برخی از این المان ها عبارتند از: صفحه نمایش، آیکون ها، جداول، کلیدها و غیره. این عناصر، اجزای سازنده پروتوتایپ هستند. اولین مرحله هر طراحی که ایجاد پروتوتایپ است بسیار وقت گیر و خسته کننده است. با استفاده از UI Kit هم می توان در زمان صرفه جویی کرد و هم اینکه بازخوردهای خوبی در این زمینه دریافت کرد. یکی از انواع UI Kit ها تحت عنوان Grade UI Kit در طراحی وب سایت ها بسیار کارآمد است و شامل صدها آیکون، جدول، صفحه نمایش و سایر المان هاست.
image05 5 روش برای تسریع طراحی با UI Kit

از مزایای ساخت پروتوتایپ با UI Kit می توان به موارد زیر اشاره کرد:

  • کیت های گرافیکی از پیش طراحی شده به شما این امکان را می دهد تا بجای صرف وقت روی جزئیات، بر تعاملات و جریان کار تمرکز نمایید و دیگر احتیاجی به بازسازی مجدد همین المان ها نمی باشد.
  • بدین وسیله دیگر مشکلات مربوط به صفه آرای، اندازه و سبک آن وجود نخواهند داشت.
  •  برخی ابزارهای مربوط به ساخت پروتوتایپ مانند UXPin به شما اجازه می دهند تا قطعات ساخته شده توسط  UI Kit را را آپلود نموده و آن ها را بصورت پروتوتایپ تکمیل نمایید.

تنها داشتن ایده کفایت نمی کند بلکه تبدیل آن به واقعیت نیز ضروری است و این امر با ساخت پروتوتایپ توسط  UI Kit میسر می شود.

استفاده از UI Kit ها برای ساخت پروتوتایپ طراحی

پیش از آغاز ساخت پروتوتایپ توسط UI Kit بهتر است نکات زیر را در نظر داشته باشیم:

  • اهداف خود را تعیین کنید و این امر نه تنها در مورد اهداف کاربری است بلکه در ارتباط با اهداف کسب و کار هم صدق می کند.
  • کاربران را مشخص کنید. قرار است چه کسانی از محصولات یا سایت شما بازدید نمایند؟ این کار را براحتی می توانید با استفاده از User Personas یعنی اطلاعات مربوط به کاربران انجام دهید.

زمانی که اهداف و نوع کاربران تعیین شدند بهتر است کمی وقت گذاشته و فکر کنید چگونه کاربران با محصولات شما تعامل برقرار می کنند. اینجاست که داشتن UI Kit ضروری به نظر می رسد.

حال که اهمیت بکارگیری UI Kit ها مشخص شد در ادامه به بررسی استفاده عملی آن می پردازیم.

۱. تعیین ویژگی های اساسی واسط خود

به المان های مورد نیاز خود فکر کنید ولی آن ها را در چهارچوب اهداف پروژه و کاربران قرار دهید. اینجاست که داشتن User Persona بکار می آید و به شما کمک می کند تا از انگیزه ها و نیازهای کاربران آگاهی یابید. بعنوان مثال بهتر است که بدانید:

۱. آیا کاربران نیاز به login در سایت دارند؟

۲. آیا نیاز به فرمی برای ثبت نام در سایت وجود دارد؟

۳. هر کاربر چگونه یک آیتم را برای خرید انتخاب می کند؟

۴. مراحل خرید پس از انتخاب یک آیتم چیستند؟

لیستی از ویژگی های اصلی که می خواهید در UI شما نمایش داده شود بنویسید. بعنوان یک پیشنهاد، به ویژگی هایی توجه کنید که بدرستی محصول شما را از سایر محصولات متمایز می کنند.

۲. انتخاب صفحات نمایشی که می خواهید در پروتوتایپ دیده شوند.

حال که ویژگی های مدنظرتان تعیین شده اند نوبت به انتخاب صفحاتی است که قرار است این عملکردها در آن ها نمایش دهند. تنها نکته ای که باید مدنظر قرار دهید این است که نباید وقت خود را صرف آیتم هایی کنید که شما از ایده اصلی خود منحرف می کنند.

۳. UI Kit انتخابی شما باید متناسب با هویت ظاهری محصول شما باشد.

نکته اصلی در انتخاب UI Kit مناسب توجه به عملکردها و ویژگی هایی است که شما جهت نمایش تعیین نموده اید. به یاد داشته باشید اجزای سازنده ای را انتخاب کنید که تناسب بیشتری با ظاهر ایده آل محصول شما دارند. در زمان انتخاب UI Kit، به نکات زیر توجه ویژه ای داشته باشید:

  • آیا امکان اختصاصی سازی طراحی را به شما می دهد؟
  • آیا اجزای سازنده مورد نیاز شما را شامل می شود؟
  • آیا فرمتی که در دسترستان قرار می دهد قابل ویرایش کردن است؟

قالب های رایج برای UI Design شامل Adobe Photoshop و Sketch می باشند.

۴. استفاده از Photoshop یا Sketch برای تغییر رنگ ها و اجزای سازنده 

وقتی UI Kit مدنظرتان را انتخاب کردید در نرم افزار طراحی خود فایل ها را باز کرده و ویرایش کنید. می توانید مراحل این کار را در زیر مرور کنید:

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

image02 5 روش برای تسریع طراحی با UI Kit

  • تمامی المان های موجود در UI Kit را در صفحه کار خود قرار دهید تا برای گردآوری صفحه نمایش آن ها را استفاده کرده و تنظیمات لازم را بر اجزای سازنده اعمال کنید.
  • در صورت نیاز رنگ اصلی Kit را تعویض نمایید. چنانچه قابلیت جابه جایی پوسته تم وجود نداردمجبورید هز یک از عناصر را یک به یک تغییر رنگ دهید.
  • بهتر است اختصاصی سازی کنید و تغییراتی را اعمال نمایید که ظاهری مدرن را به طراحی شما ببخشد.

    • ۵. افزودن برخی تعاملات پایه با استفاده از روش های ساخت پروتوتایپ

     زمانی که ساخت واسط کاربر بوسیله UI Kit ها به پایان رسید، سه روش متداول برای ساخت پروتوتایپ وجود دارد:

    ۱. نرم افزار ارائه که غالباً بوسیله مبتدیان مورد استفاده قرار می گیرد و شامل ابزارهای استاندارد ارائه مانند Keynote یا Powerpoint می شود تا چگونگی کارکرد محصول را به کاربر نشان دهند.

    ۲. پروتوتایپ های کدگذاری شده که افراد نیمه ماهر و ماهر هر دو از آن استفاده می کنند. با مراجعه به HTML و CSS می توان این پروتوتایپ ها را بکار انداخت.

    ۳. برنامه های پروتوتایپ سازی اختصاصی که تمامی کارشناسان در هر سطحی از این برنامه استفاده می کنند. ابزارهای ساخت پروتوتایپ به دانش اندک و غیر حرفه ای نیاز دارند و به شما کمک می کنند تا براحتی کار ساخت پروتوتایپ را انجام دهید.

    در نهایت می خواهیم UI Kit های کاربردی و رایجی را به شما معرفی کنیم که در این زمینه بسیار کارآ هستند و به شما کمک زیادی می کنند.

  • Android Lollipop UI Kit
  • Awesome Web UI Kit
  • ۱۵۰ Free UI Kits

منبع: www.creativebloq.com

]]> http://tarahan.com/kit/feed/ 0 کتاب رایگان طراحی Mockupها http://tarahan.com/%da%a9%d8%aa%d8%a7%d8%a8-%d8%b1%d8%a7%db%8c%da%af%d8%a7%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-mock-up-%d9%87%d8%a7/ http://tarahan.com/%da%a9%d8%aa%d8%a7%d8%a8-%d8%b1%d8%a7%db%8c%da%af%d8%a7%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-mock-up-%d9%87%d8%a7/#respond Wed, 10 Feb 2016 08:30:43 +0000 http://tarahan.com/?p=5701 […]]]> کتاب الکترونیکی رایگان برای طراحی Mockupها 

کتاب الکترونیکی Building UI Mockups Developers Don’t Hate برای طراحی Mockupها بکار رفته و چگونگی از بین بردن فاصله بین طراحی و توسعه پروژه را شرح می‌دهد. این دو مقوله همیشه بطور جداگانه فعالیت می کنند ولی هر کسی که در این زمینه ها کار می کند می داند که تفاوت های کوچک هر دو می توانند منجر به مشکلات بزرگی شوند. علاوه برای این کتاب مذبور از اینکه چطور طراحان UI و UX می توانند برای طراحی Mockupها در کنار یکدیگر همکاری کنند، می گوید.

wont hate کتاب رایگان طراحی Mockupها

این کتاب بسیار مفید حجم کمی داشته و در ۳۵ صفحه تالیف شده است، براحتی قابل فهم است و مراحل طراحی Mockupها را در قالب تئوری و تعداد تمرین به وضوح و کامل توضیح می دهد. کتاب Building UI Mockups Developers Don’t Hate کاملاً مختصر ولی کاربردی و عملی، عناوین زیر را دربرگفته و شرح می دهد:

  • دستورالعمل طراحی Mockupها و بهترین تمرین ها برای درک بهتر فرآیند طراحی
  • شرح محدودیت های توسعه که می توانند به طراحی شما آسیب وارد کرده و آن را خراب کنند.
  • چگونگی پبروی از صحت بصری فرآیند طراحی Mockupها برای حفظ هرچه بیشتر جزئیات مدنظر در ترجمه
  • معرفی بهترین پلاگین های فوتوشاپ جهت تسهیل همکاری بین میان طراحان و توسعه دهندگان
  • شرح کامل مزایا و معایب Mokhupهای مرورگر
  • معرفی ۲۰ مرجع برتر برای ساخت هر چه بهتر طراحی ها

این کتاب کارآمد و جالب را می توانید از طریق لینک زیر دانلود کرده و بعنوان مرجعی موثق همیشه در اختیار داشته باشید.

دانلود کتاب

منبع: www.creativebloq.com

 

]]> http://tarahan.com/%da%a9%d8%aa%d8%a7%d8%a8-%d8%b1%d8%a7%db%8c%da%af%d8%a7%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-mock-up-%d9%87%d8%a7/feed/ 0 ابزار‌های کارآمد برای طراحی Mockup‌ها http://tarahan.com/oooooaeoeuouoe-uooocuo-ooouoe-oooouoe-mockupaeoeuo/ http://tarahan.com/oooooaeoeuouoe-uooocuo-ooouoe-oooouoe-mockupaeoeuo/#respond Tue, 09 Feb 2016 14:35:56 +0000 http://tarahan.com/?p=5687 […]]]> Mockup ها به قالب های گرافیکی گفته می شوند که امروزه بسیار در طراحی مورد استفاده قرار می گیرند. غالباً فرمت این طرح ها psd. است و کارآمدترین ابزار برای طراحی Mockup ها فوتوشاپ است. در این مقاله، ۶ نرم افزار دیگر برای طراحی Mockup ها معرفی می شوند.

۱. Balsamiq Mockups

Balsamiq Mockups شاید یکی از محبوب‌ترین و شناخته شده‌ترین ابزارها برای طراحی Mockup است که این قابلیت را به طراحان می‌دهد تا در زمانی اندک و به زیبایی Mockup های جالبی طراحی کنند. همچنین این ابزار به شما کمک می‌کند تا مشکلات UI را بهتر مرتفع نمایید و زمان زیادی را برای جزئیات صرف ننمایند.

Balsamiq Mockups مجموعه وسیعی از اجزای سازنده Mockup ها را در اختیار دارد که قدرت انتخاب بالایی به کاربر می‌دهد.

3b115afa ابزار‌های کارآمد برای طراحی Mockup‌ها

۲. Mockingbird

Mockingbird یکی دیگر از نرم‌افزارهای رایج است که این امکان را فراهم می‌کند تا Mockup های طراحی شده را لینک کرده و به اشتراک گذاشت. بوسیله این ابزار می‌توان نمونه‌های اولیه Mockup را به سرعت طراحی کرد و همچنین این قابلیت وجود دارد که با ویرایشگر drag-and-drop به سرعت و بصورت انفرادی یا گروهی واسط‌هایی را طراحی کرد.

3898f37f ابزار‌های کارآمد برای طراحی Mockup‌ها

۳. Mockup Builder

Mockup Builder یک نرم افزار رایگان است که توسط Micrsoft Silverlight ساخته شده و این قابلیت را به کاربر می دهد تا Mockup های نرم افزاری و وب‌سایتی طراحی کند. اگرچه مجموعه المان‌های در دسترس متنوع هستند ولی به لحاظ کمی محدودند. با این وجود، بعنوان یک ابزار رایگان، Mockup Builder راهکارها و گزینه‌های ساده و بجایی را به کاربر پیشنهاد می‌دهد. زمان به اشتراک‌گذاری، Mockup طراحی شده را می‌توان در قالب PNG و PDF بکار گرفت.

76c634a8 ابزار‌های کارآمد برای طراحی Mockup‌ها

۴. HotGloo

HotGloo یکی دیگر از ابزارهای طراحی Mockup است که بدلیل مجموعه غنی و عظیم اجزای سازنده میان کاربران از رواج بالایی برخوردار است و گفته شده که بیش از ۲۶۰۰۰ پروژه طراحی با این نرم افزار انجام شده است. محیط فراهم شده توسط این نرم افزار به کاربر کمک می کند تا تمام فرآیند طراحی را به راحتی تجربه کند.

4c706b71 ابزار‌های کارآمد برای طراحی Mockup‌ها

۵. Invision

Invision یک نرم‌افزار آنلاین است که به کاربران کمک می‌کند تا علاوه بر طراحی، تجربه کاربری خود را به اشتراک گذاشته و بررسی نمایید. Mockup های طراحی شده توسط این ابزار از جذابیت خاصی برخوردار هستند و این امر مرهون مجموعه‌ای از جلوه‌های ویژه آن است. اشتراک گذاری پروژه ها و کار تیمی از دیگر ویژگی های Invision است و همچنین از طراحی ریسپانسیو برای سایر وسایل دیجیتال پشتیبانی می‌کند.

a37683f5 ابزار‌های کارآمد برای طراحی Mockup‌ها

۶. Proto.io

Proto.io یکی از نرم‌افزارهایی است که برای طراحی در وسایل متحرک بکار برده می‌شود. بوسیله این برنامه می‌توان در iPhone, iPad و Android به طراحی Mockup‌ های جالبی پرداخت، کنترل کاملی بر رنگ‌ها، فونت‌ها و صفحه‌آرایی داشت و پروژه‌ها را با سایر طراحان به اشتراک گذاشت.

Mockup های طراحی شده توسط این نرم‌افزار مستقیماً از طریق وسایل متحرک قابل رویت هستند و این امکان را فراهم می‌کنند تا کاربر طراحی خود را در دنیای واقعی تجربه کند.

 

52f73df4 ابزار‌های کارآمد برای طراحی Mockup‌ها

منبع: www.mashable.com

]]> http://tarahan.com/oooooaeoeuouoe-uooocuo-ooouoe-oooouoe-mockupaeoeuo/feed/ 0 تغییر تصاویر GIF در فوتوشاپ http://tarahan.com/css3/ http://tarahan.com/css3/#respond Tue, 09 Feb 2016 09:17:44 +0000 http://tarahan.com/?p=5651 […]]]> تصاویر GIF متحرک ظاهری چشمگیر به طراحی‌ها می‌دهند. با تغییر تصاویر GIF در فوتوشاپ، می‌توان جلوه های مطلوبی در تصاویر ایجاد نمود تا تاثیر مثبت و قابل‌توجهی بر پروژه شما داشته باشد.

مراحل اولیه بدین ترتیب است:

  • فایل GIF را در فوتوشاپ باز کنید.
  • در قسمت window، گزینه Timeline یا Animation را باز کنید.
  • همچنین، باز در قسمت window گزینه Layers را انتخاب نموده و اطمینان حاصل نمایید که پنجره Layers باز است.

در ادامه به سه روش اختصاصی سازی تصاویر GIF را آموزش می‌بینید.

روش اول تغییر تصاویر GIF در فوتوشاپ – تنظیم لایه‌ها

در پنجره Layers بالاترین لایه را انتخاب کنید و گزینه ‘Create new adjustment layer’ را برای ایجاد لایه تنظیمات جدید کلیک نمایید. برای ایجاد هر نوع تغییری می‌توانید تنظیمات مربوط به آن را انتخاب کنید. هرگونه تغییری جلوه‌های جدیدی به تمامی لایه‌های زیرین می‌دهد. در این قسمت می توانید رنگ ها و کنتراست را تغییر دهید. زمانی که تمام تغییرات مدنظر اعمال شد برای ذخیره کردن فایل بهتر است از گزینه ‘Save for Web and Devices’ استفاده کنید. در این زمان بهتر است میزان Transparency، Matte و سایر گزینه های انیمیشن را چک کنید.

مثال:

bbbbbbbbbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

animat pencil 512x512 color pink تغییر تصاویر GIF در فوتوشاپanimat pencil 512x512 color تغییر تصاویر GIF در فوتوشاپ

روش دوم تغییر تصاویر GIF در فوتوشاپ – گزینه‌های ترکیب

درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. به پنجره لایه ها رفته و اولین لایه را انتخاب کنید. آیکون fix را کلیک کرده و منوی Blending Options را برای داشتن گزینه های ترکیب باز کنید. تغییرات دلخواه را روی اولین لایه اعمال کنید. در مثال زیر، تنها جلوه هم پوشانی رنگ ها نشان داده شده است. زمانی که تمامی تغییرات اعمال شدند روی لایه راست کلیک کرده و Copy Layer Style را انتخاب کنید. سپس همه لایه ها را انتخاب کرده، مجدداً راست کلیک کنید و در این حالت، Paste Layer Style را برگزینید. تمامی لایه ها افکت مورد نظر شما را خواهند داشت. در پنجره Animation/Timeline در قسمت بالا سمت راست، More menu  را انتخاب کنید. گزینه Make Frames from Layers را برای هر لایه فعال کنید تا بطور جداگانه در فریم قرار بگیرند. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bbb bbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

animat lightbulb 512x512 تغییر تصاویر GIF در فوتوشاپanimat lightbulb 512x512 red تغییر تصاویر GIF در فوتوشاپ

روش سوم تغییر تصاویر GIF در فوتوشاپ – فریم ها

اگرچه این روش از سایر روش ها وقت‌گیرتر است ولی انعطاف‌پذیری زیادی دارد چراکه انیمیشن‌های GIF فقط مجموعه‌ای از تصاویر است و این قابلیت وجود دارد که بطور مجزا هر یک از فریم‌ها را تغییر داد و درنهایت جلوه‌ای ویژه بر انیمیشن ایجاد می‌شود. درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. می توانید هر جلوه‌ای که می‌خواهید در لایه‌ها بطور جداگانه ایجاد کنید. در مثال زیر، افکت Color Halftone بر هر لایه اعمال شده است. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bb bbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

animat pencil 512x512 color تغییر تصاویر GIF در فوتوشاپ animat pencil 512x512 halftone تغییر تصاویر GIF در فوتوشاپ

 منبع: www.creativebloq.com

 

]]> http://tarahan.com/css3/feed/ 0 تبدیل تم‌های فتوشاپ به صفحات HTML http://tarahan.com/%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%aa%d9%85-%d9%87%d8%a7%db%8c-%d9%81%d8%aa%d9%88%d8%b4%d8%a7%d9%be-%d8%a8%d9%87-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-html/ http://tarahan.com/%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%aa%d9%85-%d9%87%d8%a7%db%8c-%d9%81%d8%aa%d9%88%d8%b4%d8%a7%d9%be-%d8%a8%d9%87-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-html/#respond Tue, 09 Feb 2016 08:14:04 +0000 http://tarahan.com/?p=5606 […]]]> این مقاله درصدد است تا تبدیل تم‌های فتوشاپ به صفحات HTML را آموزش دهد. فتوشاپ در طراحی سایت نقش مهمی بازی می‌کند و مطلوب بسیاری از طراحان وب است. با ورود CSS3 به نظر می‌رسید که دیگر نیاز به فتوشاپ کمتر شده است ولی ازآنجایی که CSS3 توسط تمامی مرورگرها پشتیبانی نمی‌شود پس همچنان فتوشاپ از محبوبیت خاصی برخوردار است. فتوشاپ ابزار مناسبی برای خلق گرافیک‌های جالب است. هرچه تبدیل تم‌های فتوشاپ به صفحات HTML آسان‌تر باشد بهتر و ماهرانه‌تر می‌توان در دنیای طراحی وب کار کرد.

۱. اولین مرحله از تبدیل تم‌های فتوشاپ به صفحات HTML ایجاد یک فولدر جدید به نام webdites است که داخل آن نیز می‌بایست دو فولدر دیگر تحت عناوین images و css نیز ایجاد کنید. در این دو فولدر تمامی فایل‌های مربوط به تبدیل تم‌های فتوشاپ به صفحات HTML ذخیره می‌شوند.

۲. مرحله دوم  با باز کردن فایل فتوشاپ تم شروع می‌شود. در اینجا آموزش روی یک لوگو نمایش داده می‌شود. در نرم‌افزار فتوشاپ تمامی لایه‌های مرئی غیر از لایه Logo را نامرئی کنید. در قسمت Image گزینه Trim را انتخاب نموده و Transparent Pixels را تیک بزنید. در نهایت می‌توانید تصویر خود را در فولدر images به نام logo.png ذخیره نمایید.

۳. در این مرحله تغییراتی در تصویر پس‌زمینه داده می‌شود پس می‌بایست تمامی لایه‌ها به استثنای لایه background غیرفعال باشند. بعد می‌توان با گزینه Crop اندازه تصویر را کوچک کرد. پس از انجام تغییرات فایل را با فرمت png. ذخیره نمایید.

۴. اکنون وقت آن است که به سراغ xhtml رفته و تنظیمات قسمت عنوان را انجام داد. اینجا بهتر است از ویرایشگر متن Dreamweaver استفاده نموده و کدی که در ادامه آمده است کپی نمایید. این اولین ایندکس ایجاد شده در html است که می‌توان آن را در فولدر websites ذخیره نمود.

stage 41 تبدیل تم‌های فتوشاپ به صفحات HTML

۵. باز به فتوشاپ برمی گردیم و لایه welcome box را فعال می‌کنیم. در این صورت، با استفاده از ابزار Crop از چپ به راست و از بالا به پایین کادر برش را حرکت داده و به اندازه ۵ پیکسل در پایین کادر فاصله قرار می‌دهیم. در نهایت آن را در فولدر images تحت عنوان welcome-bg.png ذخیره می‌کنیم.

step 5 تبدیل تم‌های فتوشاپ به صفحات HTML

۶. برای مرحله ششم، تمامی کارهای مرحله پنجم را تکرار می‌کنیم با این تفاوت که حرکت برش باید از پایین به بالا انجام شود. در نهایت می‌توان تصویر را تحت عنوان welcomebg-bottom.png ذخیره کرد.

۷. تا اینجا تنظیمات عکس‌ها انجام شده و تنها کاری که باید انجام داد این است اضافه کردن استایل، رنگ و تعیین موقعیت المان‌هاست. پس در  Dreamweaver یک فایل css.  ایجاد کرده و کد زیر را در آن کپی نمایید. این فایل را در فولدر css و به نام style.css ذخیره نمایید.

stage7 تبدیل تم‌های فتوشاپ به صفحات HTML

۸. در این مرحله بهتر است فایل ایندکس را گسترده تر نماییم که لزوماً المان‌های متفاوت را در صفحا سایت در موقعیت اصلی خود قرار می‌دهند. کد html مربوط به این قسمت در زیر آورده شده است.

stage 81 تبدیل تم‌های فتوشاپ به صفحات HTML

۹. در مرحله بعد برای گذاشتن تصاویر thumbnail تنها کاری که باید کرد این است که به فتوشاپ مراجعه کرده و با استفاده از ابزار Crop تک تک تصاویر را برش می‌زنیم. بهتر است برای هر تصویر به اندازه ۵ پیکسل فاصله بگذاریم.

step 9 تبدیل تم‌های فتوشاپ به صفحات HTML

۱۰. با داشتن تصاویر متعدد باید موقعیت آن‌ها را در صفحه بدرستی انتخاب کرد که این مشکل را تنها می‌توان به کمک CSS حل نمود. کدهای مربوطه در ادامه آورده شده‌اند.

stage 101 تبدیل تم‌های فتوشاپ به صفحات HTML

۱۱. مرحله بعد در فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML مربوط به قرار دادن markup ها در فایل html است که همراه با تگ های تصویری می باشند. دقت داشته باشید که دستور div به تنهایی در markup ها استفاده می شود و این امر برای قرار گرفتن div ها در موقعیت اصلی خود ضروری است. کدها زیر، شما را در این قضیه راهنمایی می نمایند.

stage 111 تبدیل تم‌های فتوشاپ به صفحات HTML

 

۱۲. برای تنها کادر پس‌زمینه از تکنیک بکار رفته برای welcome box استفاده می‌کنیم. به فتوشاپ مراجعه نموده، لایه About me box را فعال کزده و عمل برش را با استفاده از ابزار crop انجام دهید. همانطور که در مراحل ۵ و ۶ آورده شده است یک بار crop کرد از بالا یه پایین و بار دیگر از پایین به بالا خواهد بود.

step 12 تبدیل تم‌های فتوشاپ به صفحات HTML

۱۳. برای داشتن button باید دو تصویر ایجاد شود پس در فتوشاپ لایه بالای لایه button که دربرگیرنده متن می باشد را نامرئی نمایید. سپس یک بار از بالا و یک بار از پایین عمل crop را انجام دهید.

۱۴. در این قسمت از فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML باید مجدداً  از ابزار crop استفاده کرده و عنوان تصویر بلاگ را برش بزنیم.

step 14 تبدیل تم‌های فتوشاپ به صفحات HTML

۱۵. در پایان هم نوبت به علائم شبکه‌های اجتماعی می‌رسد. پس در فتوشاپ تصاویر مربوط به هر کدام را crop کرده و تصاویر را در فولدر images ذخیره نمایید.

step 15 تبدیل تم‌های فتوشاپ به صفحات HTML

منبع: www.webdesignermag.co.uk

 

]]> http://tarahan.com/%d8%aa%d8%a8%d8%af%db%8c%d9%84-%d8%aa%d9%85-%d9%87%d8%a7%db%8c-%d9%81%d8%aa%d9%88%d8%b4%d8%a7%d9%be-%d8%a8%d9%87-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-html/feed/ 0 خلق تصاویر منسجم و جالب توسط فوتوشاپ http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d9%85%d9%86%d8%b3%d8%ac%d9%85-%d9%88-%d8%ac%d8%a7%d9%84%d8%a8-%d8%aa%d9%88%d8%b3%d8%b7-%d9%81%d9%88%d8%aa%d9%88%d8%b4%d8%a7%d9%be/ http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d9%85%d9%86%d8%b3%d8%ac%d9%85-%d9%88-%d8%ac%d8%a7%d9%84%d8%a8-%d8%aa%d9%88%d8%b3%d8%b7-%d9%81%d9%88%d8%aa%d9%88%d8%b4%d8%a7%d9%be/#respond Mon, 08 Feb 2016 11:20:16 +0000 http://tarahan.com/?p=5595 […]]]> انسجام، یک نکته کلیدی در قرار دادن تصاویر است.

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

انتخاب و ترکیب مناسب

اولین گام در این مرحله انتخاب درست و بجای تصاویر است. بعنوان مثال برای وب‌سایت Adventure.com که مرتبط با سفرهای ماجراجویانه است بهتر است تصاویر متشکل از رنگ‌های روشن و موضوعات جالب باشند. علاوه‌براین، باید به اندازه تصاویر دقت لازم را داشته باشیم و المان‌های UI در برگیرنده عکس‌ها را درنظر بگیریم. درنتیجه باید تصاویر را متناسب با محتوای متنی مدنظر Crop کنیم.

ترکیب سبک‌های تصاویر در فوتوشاپ

در مرحله بعد تنظیمات سبک عکاسی است که باید متناسب با چیدمان سایت و سایر عکس‌های مورد استفاده باشد. در فوتوشاپ، می‌توان با هم‌پوشانی رنگ‌ها، تنظیمات جالبی روی تصاویر انجام داد. در قسمت Layer Styles هر تصویر می‌توان از Colour Overlay استفاده کرد. در این تصویر دیده می‌شود که رنگ عکس روشن‌تر می‌شود. بعد می‌توان Blend Mode را از Normal به Exclusion تغییر داد و سپس Opacity را به ۳۰% یا کمتر کاهش داد.

 adventure03 خلق تصاویر منسجم و جالب توسط فوتوشاپ

استفاده از تکنیک Polish در فوتوشاپ

بر اساس کنتراست عکس و المان‌های UI دربرگیرنده هر تصویر، می‌توان Opacity را در Colour Overlay کم یا زیاد کرد. حتی در فوتوشاپ با تغییر کلی رنگ‌ها نیز می‌توان جلوه‌های جالبی در تصاویر ایجاد کرد. می‌توان با تنظیم رنگ‌های گرم و سرد ظاهری زیبا به عکس‌ها داد.

adventure04 خلق تصاویر منسجم و جالب توسط فوتوشاپ

منبع: www.webdesignermag.co.uk

]]> http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d9%85%d9%86%d8%b3%d8%ac%d9%85-%d9%88-%d8%ac%d8%a7%d9%84%d8%a8-%d8%aa%d9%88%d8%b3%d8%b7-%d9%81%d9%88%d8%aa%d9%88%d8%b4%d8%a7%d9%be/feed/ 0 خلق اینفوگرافیک به سبک وکتور http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-%d8%a8%d9%87-%d8%b3%d8%a8%da%a9-%d9%88%da%a9%d8%aa%d9%88%d8%b1/ http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-%d8%a8%d9%87-%d8%b3%d8%a8%da%a9-%d9%88%da%a9%d8%aa%d9%88%d8%b1/#respond Mon, 08 Feb 2016 09:48:57 +0000 http://tarahan.com/?p=5562 […]]]> معمولاً هنر طراحی اینفوگرافیک به سبک وکتور همراه با Adobe Illustrator است ولی جلوه‌های مشابهی نیز با استفاده از فوتوشاپ قابل دسترسی هستند. این سبک از الگوی مدرن مینیمالیسم پیروی می‌کند و به خلق هنری می پردازد که بی‌نظیر بوده و برای اهداف وب مناسب هستند. در این مقاله به آموزش طراحی با استفاده از فوتوشاپ می‌پردازیم که اگرچه ساده بنظر می‌رسد ولی مستلزم دانش خوبی از ابزار Pen است. این طراحی در قالب یک اینفوگرافیک نمایش داده خواهد شد.

۱. اولین قدم تنظیم سایز فایلی است که می خواهید در آن کار کنید. بهتر است برای طراحی یک اینفوگرافیک اندازه فایل را کاغذ A3 با DPI 300 درنظر بگیرید. دلیل این انتخاب قابلیت چاپ بر پوسترهای A2 می‌باشد بدون اینکه کیفیت آن کاهش یافته باشد و درعین حال فضای قابل توجهی را در حافظه سیستم ذخیره می‌نماید.

stage 1 خلق اینفوگرافیک به سبک وکتور

۲. گام بعدی تنظیم رنگ پس زمینه است و در اینجا از بازه رنگی خاکستری کم رنگ تا سفید استفاده شده است. برای ناحیه خاکستری کد c4c4c4 و برای قسمت سفید کد fcfcfc درنظر گرفته شده است. این اقدامات باید در کادر تنظیمات Layer Style انجام شوند که این کادر با دوبار کلیک کردن بر گزینه Layer در Layers panel فعال می‌شود. برای این طراحی در قسمت داخلی رنگ سفید انتخاب شده است.

stage 2 خلق اینفوگرافیک به سبک وکتور

۳. برای ترسیم دایره باید از Ellipse tool استفاده نموده و یک دایره بزرگ در مرکز فایل بکشید. بهتر است Opacity را به ۰% و Storke Size را به ۳ تغییر دهید. بدین ترتیب می‌توان رنگ پس‌زمینه را از میان دایره مشاهده کرد.

stage 3 خلق اینفوگرافیک به سبک وکتور

۴. در یک لایه جدید بهتر است اشکال مدنظر خود را ترسیم کنید که این کار با استفاده از Pen tool میسر است. اشکال رسم شده در تصویر نشان داده شده‌اند.

stage 4 خلق اینفوگرافیک به سبک وکتور

۵. در Paths tab می توانید آخرین path کشیده شده را ببینید. دستور Ctrl+right-click را بر آن اجرا کرده، Fill Path را انتخاب نموده و بعد از رنگ پیش‌زمینه استفاده نمایید. در اقدام بعدی، path را deselect کرده و به قسمت Layers tab بازگردید. برای اینکه بهتر کار کنید می‌توانید لایه دایره را  مخفی (Hide) نمایید. از گرادیانت انعکاسی۱۴۱ درجه استفاده نموده و کد رنگ‌های f9f9f9 و ededed را بکار بگیرید.

stage 5 خلق اینفوگرافیک به سبک وکتور

۶. در این مرحله باید یک لایه جدید دیگر بسازید ولی دقت نمایید که موقعیت آن قبل از لایه پیشین باشد درنتیجه می‌توانید جلوه ۳D را با Pen tool ایجاد نمایید. حال، مانند قبل از گزینه Fill استفاده نمایید ولی این بار گرادیانت خطی ۹۰ درجه را با کدهای رنگی a7a6a6 و ffffff بکار گیرید.

stage 6 خلق اینفوگرافیک به سبک وکتور

۷. باز هم لایه جدیدی ایجاد کنید و آن را بالاتر از سایر لایه‌ها قرار دهید. برای انجام بهتر ادامه مرحله بهتر است شکل دایره اصلی را مجدد ظاهر نمایید و مانند تصویر اجزای سبزی را زیر قسمت سفید ایجاد کنید. برای ایجاد رنگ می‌توانید از گرادیانت انعکاسی ۱۳۳ درجه با کد رنگ‌های ۹ad429 و ddf470 استفاده کنید.

stage 7 خلق اینفوگرافیک به سبک وکتور

۸. همانطور که برای قسمت سفید انجام دادید، لایه جدیدی زیر لایه سبز ایجاد نمایید، با استفاده از Pen tool سایه زیرین تصویر را شکل دهید و برای آن گرادیانت خطی ۹۰- درجه با کدهای رنگی ۸۷bc0f و ۷۹aa08 را بکار گیرید. به یاد داشته باشید که تمامی رنگ‌ها و درجات فقط بعنوان راهنما برای شما درنظر گرفته شده‌اند.

stage 8 خلق اینفوگرافیک به سبک وکتور

۹. باز هم به قسمت سبز برگردید. یک لایه جدید زیر لایه سبز اصلی ایجاد نمایید و قسمت بالایی شکل سبز را طراحی کنید. بهتر است طراحی بگونه ای باشد که یک سطح صاف مانند چمن را نشان دهد. برای انتخاب رنگ در این مرحله، از گرادیانت خطی ۹۰ درجه با کدهای رنگی ۹ddb16 و d7ff46 استفاده کنید. این قسمت از طراحی بهتر است از سایر المان ها روشن تر باشد.

stage 9 خلق اینفوگرافیک به سبک وکتور

۱۰. حال، می‌خواهیم اشکالی را ترسیم کنیم که نشانگر صخره هستند. پس بعد از اینکه شکل موردنظر خود را رسم کردید، از گرادیانت خطی ۷۰- درجه با کدهای رنگی ۸d6b50 و d1bc98 استفاده نمایید.

stage 10 خلق اینفوگرافیک به سبک وکتور

۱۱. در این مرحله، می‌خواهیم عنصر آب را اضافه کنیم. با استفاده از دایره اصلی، شکلی برای قسمت آبی رنگ ترسیم نمایید. اگر برای انتخاب رنگ آبی با مشکل مواجه شدید به شما پیشنهاد می کنیم که از گرادیانت انعکاسی ۳۶- با کدهای رنگی ۳۳abbb و ۳۶e6ed استفاده کنید.

stage 11 خلق اینفوگرافیک به سبک وکتور

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

stage 12 خلق اینفوگرافیک به سبک وکتور

۱۳. در این مرحله می‌خواهیم جلوه‌هایی از قطرات آب را اضافه کنیم. این کار را براحتی می‌توان با Pen tool انجام داد. از دستور رنگی آبی مشابه بالا استفاده کنید با این تفاوت که قسمت انتهایی قطرات را تیره‌تر کنید.

stage 13 خلق اینفوگرافیک به سبک وکتور

۱۴. در قسمت انتهایی می‌خواهیم شکلی نمایانگر کویر را به طراحی اضافه کنیم. مراحل طراحی قبلاً ذکر شده است فقط تنها تفاوت در اینجا تغییر رنگ‌هاست که می‌توان از کدهای رنگی dbc146 و ecf774 استفاده کرد. در این مرحله، طراحی کره زمین به پایان رسید. تنها چیزی که باقی می‌ماند، قسمت نوشته‌های اینفوگرافیک است.

stage 14 خلق اینفوگرافیک به سبک وکتور

stage 15 خلق اینفوگرافیک به سبک وکتور

منبع: www.webdesignermag.co.uk

]]> http://tarahan.com/%d8%ae%d9%84%d9%82-%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-%d8%a8%d9%87-%d8%b3%d8%a8%da%a9-%d9%88%da%a9%d8%aa%d9%88%d8%b1/feed/ 0 بایدها و نبایدهای الگوهای طراحی در HTML و CSS http://tarahan.com/html-css/ http://tarahan.com/html-css/#respond Sun, 07 Feb 2016 11:38:21 +0000 http://tarahan.com/?p=5547 […]]]> بسیاری از افراد هستند که از عملکرد الگوهای طراحی در HTML و CSS آگاهی دارند ولی گاهاً در این رابطه دچار سردرگمی می شوند. بدین ترتیب، در این مطلب به نکاتی درمورد بایدها و نبایدهای الگوهای طراحی در HTML و CSS اشاره شده است.

5020724 orig 300x217 بایدها و نبایدهای الگوهای طراحی در HTML و CSS

بایدهای الگوهای طراحی در HTML و CSS

  • استانداردسازی کدها

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

  • فراهم کردن شرایط UI (واسط کاربری) ثابت

در زمینه واسط های دیجیتال، هر کاربر سطح مشخصی از انتظارات را تجربه می‌کند که عموماً این انتظارات بر اساس تکرار ایجاد می‌شوند و درعوض به ما کمک می‌کنند تا استانداردهای درستی را تعیین نماییم. تنها یک الگوی UI نمی‌تواند برای تمامی موارد مناسب باشد ولی بهتر است با شلوغی بیش از حد الگوهای طراحی در HTML و CSS، کاربران دچار سردرگمی نشوند. نکته حائز اهمیت این است که محصولات دیجیتال تنها نباید طراحی و تولید شوند بلکه باید رضایت کاربران را نیز فراهم کنند.

  • امکان استفاده مجدد و قابلیت نگهداری

تمرکز مطلق بر لزومات و عملکرد مورد نیاز و مدنظر کاربران کار راحتی است. در این راستا، موفقیت زمانی حاصل می‌شود که با طراحی و ساخت وسیله‌ای، بتوان کاربر را شاد و راضی نمود. با این وجود، چه اتفاقی می‌افتد وقتی‌که کاربر نظر خود را عوض می‌کند و شما با تقاضای توسعه عملکرد پروژه مواجه می‌شوید؟ در این شرایط کدها باید مجدداً نوشته شوند ولی اگر از ابتدا کدنویسی با استفاده از الگوهای طراحی در HTML و CSS انجام شود قابلیت تعویض و توسعه در آینده نیز براحتی وجود دارد.

نبایدهای الگوهای طراحی در HTML و CSS

  •  کد اسنیپت‌ها (خرده کدها یا Code Snippets)

کد اسنیپت‌ها عملکردهایی را فراهم می‌کنند که مجدداً قابل استفاده می‌باشند. این عملکردها از قبل مورد بررسی قرار گرفته‌ و در پروژه‌های دیگر اثبات شده‌اند. درنتیجه مانع از نوشتن راهکارهای مشابه تکراری می‌شوند. الگوهای طراحی در HTML و CSS، ساختار و قوانینی را تعیین می‌کنند که به شما در زمینه اتخاذ تصمیمات منسجم در زمان کدنویسی، کمک می‌کنند. کد اسنیپت‌ها متناسب با مجموعه‌ای از الگوها هستند و درنتیجه باید به یاد داشته باشید هر یک از این کدها چگونه با الگوها سازگاری دارند. در نظر بگیرید که الگوهای طراحی راه حلی برای شما نخواهند داشت بلکه روشی برای پیدا کردن راه‌حل نشان می‌دهند.

  • رفع نیاز به بررسی

زمان بررسی الگوهای UI، عموماً باید از تمامی تعاملات بین کاربران و واسط‌ ها اطمینان حاصل کرد. بنابراین، براحتی می‌توان فرض کرد که دیگر نیازی به امتحان و بررسی نیست و الگوها برای کاربران مناسب هستند. البته این نوع تصمیم‌گیری بسیار پرمخاطره است و کاربران با ویژگی‌های جمعیت‌شناسی، صنایع و یا محیط‌های مختلف رفتار‌های متنوعی را انتظار دارند. حتی اگر بدنبال راه‌حلی برای کاربران پیشین خود می‌گردید باید در نظر داشته باشید که استانداردهای تجربه کاربر با گذشت زمان متحمل تغییراتی می‌شوند.

  • تهیه یک رویکرد برای هر پروژه

الگوهای طراحی در HTML و CSS از فراهم‌سازی ساختار یک برنامه گرفته تا الگوهای کوچک‌تر هر عملکرد مورد استفاده قرار می‌گیرند. اغلب پروژه ها مجموعه‌ای از الگوهای طراحی را شامل می‌شوند که در دو گروه UI و عملکردی قرار می‌گیرند و هر الگویی نیز ممکن است الگوهای کوچک‌تری را دربرگیرد. به عنوان مثال، AngularJS بر مبنای الگوی MVC است که مدل و کنترلگر را از هم جدا می‌نماید درحالی که کنترلگر نیز می‌تواند شامل الگوهای جاوااسکریپت دیگری مانند Constructor یا Modular شود.

منبع: www.webdesignermag.co.uk

]]> http://tarahan.com/html-css/feed/ 0 ۵ اشتباه رایج در مورد تگ‌های HTML5 http://tarahan.com/html5/ http://tarahan.com/html5/#respond Sat, 06 Feb 2016 11:54:50 +0000 http://tarahan.com/?p=5534 […]]]> بسیاری از تگ‌های HTML5 هستند که پرکاربردند ولی کارآیی برخی از تگ ها آنطور که به نظر می رسد، نیست. در این مطلب، ۵ نمونه از این تگ ها را معرفی کرده و به کاربرد آن‌ها اشاره می‌کنیم.

new html5 elements 300x218 5 اشتباه رایج در مورد تگ‌های HTML5

Section

تگ <section> یکی از تگ‌های HTML5 است که محتوای متنی را نشانه‌گذاری می‌کند (درنتیجه حتماً باید عنوان وجود داشته باشد). المان section بهترین گزینه برای نشانه‌گذاری بخش‌ها بعنوان مثال در یک کتاب می باشد. حتی می توان از این تگ زمان نوشتن متن‌های طولانی مانند پایان‌نامه برای جداسازی بخش‌ها استفاده کرد.

 Footer

تگ <footer> برای نوشتن footerهای وب سایت نیست بلکه یکی از تگ‌های HTML5 است که مربوط به محتواهای footer بخش‌های مختلف می‌شود. همچنین، این تگ برای نوشتن متن‌های مرتبط با داده های کپی‌رایت و متون فرعی نیز استفاده می‌شود. علاوه براین، تگ footer می‌تواند دربرگیرنده تمامی بخش‌ها مانند ضمائم و فهرست‌ها باشد.

Header

تگ <header> نیز همانند <footer> برای سایت بکار برده نمی‌شود بلکه کاربرد آن برای قسمت‌های مقدماتی متن است. علاوه براین، تگ header برای متون بزرگ مانند جداول و پیش‌گفتارها هم قابل استفاده است ولی بیشتر رایج است که برای عناوین و پاراگراف‌های نخستین بکار برده شود.

Address

یکی دیگر از تگ‌های HTML5، تگ <address> است که نه تنها برای ارسال پست‌های متنی به آدرس‌های مدنظر مورد استفاده قرار می‌گیرد بلکه زمان استفاده در درون متون، می‌تواند بعنوان اطلاعات دسترسی برای نزدیک‌ترین مقاله یا متن باشد. اگرچه، Address غالباً بصورت آدرس پستی است اما می‌تواند در قالب آدرس ایمیل، شماره تلفن و یا لینک دسترسی به صفحه نویسنده باشد.

Nav

آخرین تگ از تگ‌های HTML5 به نام <nav> است که نه تنها برای navigation اولیه، بلکه برای نشانه‌گذاری تمام navigation ها در صفحه بکار برده می‌شود. حتی برای navigation ثانویه نیز نشانه‌گذاری باید با <nav> انجام شود. چنانچه محتوای تگ <nav> دربرگیرنده لیستی از موارد باشد، آیتم‌ها باید با یک لیست نیز نشانه‌گذاری شوند.

منبع: www.webdesignermag.co.uk

 

]]> http://tarahan.com/html5/feed/ 0 معرفی LESS http://tarahan.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c/ http://tarahan.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c/#respond Wed, 03 Feb 2016 11:49:54 +0000 http://tarahan.com/?p=5506 […]]]> LESS چیست و چگونه عمل می کند؟

LESS یکی از پیش پردازنده‌های CSS است که به روشی پویا با ایجاد مجموعه ای از متغیرها، حسابگرها، توابع و غیره کار کردن با CSS را آسان‌تر و سریع‌تر می‌کند.

مشکلی که در CSS وجود دارد حجم بالای کدها و فایل های متنوع است که سرعت انجام کار را پایین می آورند بخصوص زمانی که ضرورت انجام تغییراتی وجود دارد. در اینجاست که LESS بعنوان راه حلی برای این مشکل بکار گرفته می‌شود. در حقیقت، کارآیی بالا و قابلیت صرفه جویی در زمان از مهم ترین دلایل کاربرد زیاد LESS و سایر پیش‌پردازنده‌هاست.

متغیرها

متغیرها، مهم‌ترین دلیل برای استفاده از پیش پردازنده های CSS هستند. کار کردن با متغیرهای LESS کار دشواری نیست. تمامی متغیرها با علامت @ آغاز و مشخص می‌شوند و می توانند متشکل از اعداد یا داده‌های متنی باشند. همانطور که در مثال پایین دیده می شود کد LESS در ابتدای استایل تعریف شده و بعد در موقعیت‌‌های لازم فقط کد آورده می شود در حالی که کد مربوط به CSS همواره باید به صورت دستی در تمامی دستورات CSS تکرار شود.

LESS CSS معرفی LESS

Mixinها

Mixinها یکی دیگر از قابلیت های مطبوع زبان Less هستند که عملکردی منحصربفرد دارند. بدین ترتیب که با استفاده از Mixinها می توان خصوصیات یک کلاس را برای کلاس دیگر استفاده کرد. درنتیجه این قابلیت وجود دارد که کلاس‌ها را در HTML ترکیب نمود در حالی که این امکان در CSS وجود ندارد.

عملگرها و توابع

عملگرها در LESS عمل جمع، تفریق، تقسیم و ضرب اعداد، رنگ‌ها و سایر متغیرها را انجام می‌دهند. این توابع ساده ریاضی می توانند روابط پیچیده و جالبی را ایجاد کنند. از طرف دیگر، توابع با جاوااسکریپت کار می کنند که امکان ایجاد تغییرات در متغیرها را به شکلی خاص فراهم می‌کند.

Nesting

Nesting در LESS یکی دیگر از روش‌های کارآمد کدنویسی است. بدین ترتیب که با استفاده از Nesting بجای تکرار کد در قسمت عنوان هر دستور، کد موردنظر تنها یک بار در بخش اصلی آورده می شود و بعد بطور خودکار در تمامی بخش های لازم تکرار می شود. یکی از نکات کلیدی در Nesting این است که خواندن کد را آسان‌تر می‌نماید.

 نصب LESS

یکی از مطالب جالب توجه در مورد LESS این است که دو روش برای نصب آن وجود دارد:

۱- سمت کاربر (Client-Side)

۲- سمت سرور (Server-Side)

تفاوت این دو روش در مکان اجرای کدمی باشد که می تواند کامپیوتر کاربر و یا سرور وی باشد.

منبع: www.webdesignviews.com

]]> http://tarahan.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c/feed/ 0 اصول منسجم طراحی UI http://tarahan.com/%d8%a7%d8%b5%d9%88%d9%84-%d9%85%d9%86%d8%b3%d8%ac%d9%85-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c/ http://tarahan.com/%d8%a7%d8%b5%d9%88%d9%84-%d9%85%d9%86%d8%b3%d8%ac%d9%85-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c/#respond Tue, 26 Jan 2016 12:54:33 +0000 http://tarahan.com/?p=5486 […]]]> کتاب طراحی UI برای چشم انسان

امروزه، اغلب کاربران نیازمند وجود انسجام در طراحی سایت ها هستند و طراحی خواهان چگونگی ایجاد این انسجام.

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

یادآوری می شود که طراحی UI به طراحی واسطه کاربری برای ماشین آلات و سخت افزارهایی مانند کامپیوترها، لوازم خانگی، وسایل الکترونیکی متحرک گفته می‌شود که متمرکز بر بالا بردن تجربه و رضایت کاربران می باشد. هدف اصلی از طراحی UI ایجاد تعامل موثر و ساده کاربران در جهت برآورده سازی نیازهایشان می باشد.

Web UI Design for the Human Eye Colors Space Contrast اصول منسجم طراحی UI

این کتاب الکترونیکی جامع نکات زیر را آموزش می دهد:

  • نکات تجربی از مثال های تحلیل شده سایت های معروفی چون Jukely ،Wunderlist ،Squarespace و غیره
  • هنر و علم چگونگی تاثیر جلوه های بصری بر مغز و ایده انسان ها
  • بخش های پر دردسر UI که نیازمند توجه زیاد و دقیقی می باشند.
  • پیش بینی و برآورده سازی انتظارات کاربران
  • چگونگی یافتن الگوهای UI برای هر طراحی مشخصی
  • بکارگیری دیدگاه های کاربران در طراحی UI

برای دانلود این کتاب ارزشمند و مفید بطور رایگان می توانید از لینک زیر استفاده نمایید:

دانلود کتاب

منبع: www.awwwards.com

]]> http://tarahan.com/%d8%a7%d8%b5%d9%88%d9%84-%d9%85%d9%86%d8%b3%d8%ac%d9%85-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c/feed/ 0 وردپرس و iOS http://tarahan.com/%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-ios/ http://tarahan.com/%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-ios/#respond Mon, 25 Jan 2016 10:55:55 +0000 http://tarahan.com/?p=5457 […]]]> طبق گزارشات اخیر از Walker Sands Mobile Traffic اغلب تلفن های همراه از سیستم عامل iOS استفاده می کنند. با توجه به اهمیت این مطلب، وردپرس نرم افزار موبایل خود را بروزرسانی نموده و درنتیجه، وردپرس و iOS در تمامی ابزارهایی که از این سیستم عامل پیروی می کنند در کنار هم قابل استفاده می باشند. بروزرسانی نرم افزار  برای ادمین ها این امکان را فراهم می کند تا براحتی پست های خود را منتشر ساخته و سایت خود را از طریق iPad و iPhone مدیریت نمایند.

photo وردپرس و iOS

حالا که وردپرس و iOS در کنار هم بکار برده می شوند، اقدامات لازم برای جلب رضایت کاربران در زمان مراجعه به سایت ها چیست؟

استفاده همزمان وردپرس و iOS یکی از مطلوب ترین پروژه ها برای طراحان و کاربران است. اولین استراتژی، طراحی سایت با در نظر گرفتن سیستم تلفن های همراه است. نمونه هایی از این استراتژی، طراحی سایت در دامنه mobi. و یا زیردامنه .them می‌باشد. زمانی که سرور، مرورگر را بصورت یک وسیله متحرک شناسایی می‌کند بجای نسخه کامل، سایت با نسخه موبایل نمایش داده می شود. سایت های موبایل، به روشی کاملاً متمایز ساخته، نگهداری و بهینه می شوند و زمان جستجو در وسایل متحرک عملکرد بهتری را ارائه می دهند.

بخشی از محبوبیت وردپرس به بازه گسترده Plugin ها بر می گردد. تنها کاری که هر طراح باید انجام دهد نصب Plugin های مورد نیازش است. برای کار کردن با وردپرس و iOS بطور همزمان، Plugin هایی نیز جهت استفاده درسایت های متحرک وجود دارند. WPTouch نیز یکی از همین Plugin هاست که کاربر را قادر می سازد تا تم های مختلفی را انتخاب نموده و به کمک آن ها سایت وردپرس خود را از اندازه بزرگ به اندازه مناسب برای ابزار متحرک بخصوص وسایل iOS7 که سرآمد هستند، مبدل کند.

علاوه بر استفاده از Plugin ها، می توان با تهیه کردن نرم افزاری از سایت و انتشار آن در app store، دسترسی به سایت را برای کاربران آسان‌تر نموده و شمار خوانندگان و مراجعه کنندگان به سایت را افزایش داد.

بعنوان آخرین راه کار در زمینه کاربرد وردپرس و iOS می توان طراحی ریسپانسیو (Responsive Design) را پیشنهاد نمود. این روش منجر به طراحی سایت در چارچوبی است که المان های آن با سایزهای متنوع وسایل قابل تنظیم است.

از مزایای سایت وردپرس ریسپانسیو، می توان موارد زیر را نام برد:

  • تنها نیاز به طراحی و بهینه سازی یک سایت وجود دارد.
  •  این روش، برای ساخت سایت های بهینه شده در وسایل متحرک توسط Google پیشنهاد شده است.
  • تم ها وردپرس و ریسپانسیو بسیاری وجود دارند که می توانند نقطه آغاز طراحی وب سایت شما باشند.

منبع: www.webdesign.org

 

 

]]> http://tarahan.com/%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3-ios/feed/ 0 استفاده از فضای منفی http://tarahan.com/%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%81%d8%b6%d8%a7%db%8c-%d9%85%d9%86%d9%81%db%8c/ http://tarahan.com/%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%81%d8%b6%d8%a7%db%8c-%d9%85%d9%86%d9%81%db%8c/#respond Sat, 23 Jan 2016 13:14:18 +0000 http://tarahan.com/?p=5435 […]]]> زمان بهینه سازی طراحی ها، عناصر بسیاری هستند که باید مدنظر قرار بگیرند و یکی از مهم ترین این المان ها، فضای منفی یا Negative Space است. فضای منفی بطور ذاتی فضایی خالی است که طرح اصلی شما را در برمی گیرد و گاهاً فضای سفید نامیده می شود. امروزه فضای منفی بسیار پرکاربرد است و استفاده درست از آن تاثیر مثبتی بر طراحی سایت می گذارد. در این مقاله، روش هایی برای استفاده بهتر از فضای منفی معرفی می شوند.

تاکید

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

emphasis1 300x300 استفاده از فضای منفی

emphasis2 استفاده از فضای منفی

پروتوتایپ یا نمونه اولیه

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

ساده سازی

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

 

simplify1 استفاده از فضای منفی

اندازه

استفاده از اندازه های مختلف یک طرح می تواند ایده جالبی در مقوله طراحی باشد. چنانچه هر یک از عناصر در سایزهای متفاوت باشند، فضای منفی بیشتری در اختیار خواهید داشت. استفاده از اندازه های مختلف منجر به دیده شدن تمامی طراحی ها می باشد و علاوه بر آن، حس حرکت و انرژی را القا می کند.

size1 tn استفاده از فضای منفی

size2 tn استفاده از فضای منفی

در پایان، گفته می شود که استفاده از فضای منفی آن‌طور که بنظر می رسد پیچیده نیست. بهترین روش در این زمینه بکار گرفتن المان هایی است که حضورشان در طراحی شما ضروری است.

  منبع: webdesignviews.com

]]> http://tarahan.com/%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%81%d8%b6%d8%a7%db%8c-%d9%85%d9%86%d9%81%db%8c/feed/ 0 Microblogging (میکروبلاگینگ) http://tarahan.com/microblogging-%d9%85%db%8c%da%a9%d8%b1%d9%88%d8%a8%d9%84%d8%a7%da%af%db%8c%d9%86%da%af/ http://tarahan.com/microblogging-%d9%85%db%8c%da%a9%d8%b1%d9%88%d8%a8%d9%84%d8%a7%da%af%db%8c%d9%86%da%af/#respond Sat, 23 Jan 2016 09:02:13 +0000 http://tarahan.com/?p=5417 […]]]> Microblogging (میکروبلاگینگ) یکی از روش های وبلاگ نویسی است که بواسطه آن کاربران قادر به نوشتن و انتشار متون کوتاه می باشند. در سال های اخیر، این روش بسیار محبوب و رایج شده است. Microblogging (میکروبلاگینگ) برای کاربران این امکان را فراهم می کند تا یادداشت ها، تصاویر، ویدیوها و سایر متون متنوع را منتشر سازند. یک تم وردپرس مناسب برای Microblogging (میکروبلاگینگ) از تمامی این فرمت ها پشتیبانی می کند.

تفاوت بین Blogging (بلاگینگ) و Microblogging (میکروبلاگینگ) 

همانطور که به نظر می رسد Microblogging (میکروبلاگینگ) نسخه کوتاه تر Blogging (بلاگینگ) است ولی تفاوت های جالب توجهی نیز میان آن ها دیده می شود. تم های مناسب برای Microblogging (میکروبلاگینگ) این اختلافات را نشان داده و محیط کاملی برای سایت Microblogging (میکروبلاگینگ) شما فراهم می کند.

01 long story short Microblogging (میکروبلاگینگ)

برخی از تفاوت های مهم میان Blogging و Microblogging عبارتند از:

    • کاهش حجم نوشته ها. درحالی که مانند سایر رسانه های اجتماعی محدودیت نوشتاری وجود ندارد، Microblogging (میکروبلاگینگ) تنها با پیغام های کوتاه و پست های سریع در ارتباط است.
    • یک نوع محتوای متنی. غالباً پست های معمولی همراه با مجموعه ای از تصاویر، ویدیوها و لینک ها می باشند اما در Microblogging (میکروبلاگینگ) با هر بار پست می توان فقط یک تصویر یا یک ویدیو یا یک لینک یا یک متن کوتاه قرار داد.
    • بروزرسانی های مکرر. در Blogging روزی یک بار بروزرسانی کفایت می کند.بعنوان یکی از قوانین، Microblogging (میکروبلاگینگ) بعلت بروزرسانی های متعدد و تعداد زیادی از پست ها دینامیک تر می باشد.
    • استفاده از ابزار متحرک. اگرچه در Blogging می توان از تمامی وسایل استفاده کرد ولی Microblogging (میکروبلاگینگ) غالباً بوسیله ابزار متحرک انجام می‌شود چرا که انتشار پست های کوتاه و یا ارسال یک عکس بوسیله موبایل راحت تر از نوشتن یک متن ۱۰۰۰ کلمه ای است.

پست فرمت ها در وردپرس

پست فرمت ها با وردپرس ۳.۱ معرفی شدند و المان هایی هستند که داشتن Microblogging (میکروبلاگینگ) را ممکن می سازند. درحقیقت، پست فرمت ها سبک هر پست را تعیین می کنند و بدین ترتیب، پست تصویری باید سبکی متفاوت با پست ویدیویی یا متنی داشته باشد.

در سال های اخیر، ۹ پست فرمت جدید معرفی شده اند (با درنظر گرفتن فرمت استاندارد که از ابتدای Blogging مورد استفاده قرار می گرفت، ۱۰ پست فرمت موجود می‌باشد). این فرمت ها عبارتند از:

  1.  تصویر – برای انتشار تصاویر
  2.  گالری – برای انتشار بیش از یک تصویر در یک زمان
  3.  وضعیت – برای ارسال پست های کوتاه در برخی از شبکه های اجتماعی مانند توییتر که با محدودیت نوشتاری همراه است.
  4. حاشیه – برای ارایه یادداشت های کوتاه که غالباً بدون عنوان آورده می شوند مانند پست های کوتاه در فیس بوک
  5.  ویدیو – برای ارسال ویدیو که با توجه به تم مورد استفاده یا می توان ویدیو را آپلود کرد یا از سایت های دیگر قرار داد.
  6. صوتی – برای انتشار فایل صوتی مانند آهنگ ها و سایر فایل های مشابه
  7. نقل قول – برای ارسال نقل های قول های کوتاه
  8. لینک – برای قرار دادن لینک از سایت های دیگر
  9. چت – جهت انتشار رونوشتی از مکالمات و چت ها

انتخاب بهترین تم وردپرس برای Microblogging (میکروبلاگینگ)

در زمان انتخاب بهترین تم وردپرس برای Microblogging (میکروبلاگینگ) باید نکات خاصی را مدنظر قرار دهید. اگرچه همه چیز به بلاگ و محتوای آن بستگی دارد ولی باید برخی نکات را به خاطر سپرد:

  • پست فرمت های وردپرس – یک تم Microblogging (میکروبلاگینگ) مناسب، بسیاری از پست فرمت ها را پشتیبانی می کند.
  • زمان بارگذاری – غالباً Microblog ها تصاویر، ویدیوها و پست های بسیاری را شامل می شوند درنتیجه انتخاب تمی که سرعت بارگذاری بالایی داشته باشد، حائز اهمیت می باشد.
  • سازمان بندی محتوا و طراحی کارآمد – بعلت وجود تعداد زیادی از پست ها، طراحی تم باید کارآمد و سازمان یافته باشد و صفحات موجود در سایت نباید شلوغ باشند. علاوه براین، انتخاب تم وردپرس برای Microblogging (میکروبلاگینگ) باید بگونه ای باشد که محتوا را در مرکز توجه قرار دهد. در چنین شرایطی، بهتر است از تم هایی استفاده شود که مینیمال و ساده هستند.
  • طراحی ریسپانسیو (Responsive Design) – غالباً Microblog ها توسط وسایل متحرک، مدیریت و مشاهده می شوند. پس باید تمی انتخاب کرد که کاملاً Responsive بوده و در صفحات دیجیتالی کوچک هم بخوبی نمایش داده شود.

 

  منبع: webdesignviews.com

]]> http://tarahan.com/microblogging-%d9%85%db%8c%da%a9%d8%b1%d9%88%d8%a8%d9%84%d8%a7%da%af%db%8c%d9%86%da%af/feed/ 0 فیلترهای CSS http://tarahan.com/%d9%81%db%8c%d9%84%d8%aa%d8%b1-%d9%87%d8%a7%db%8c-css/ http://tarahan.com/%d9%81%db%8c%d9%84%d8%aa%d8%b1-%d9%87%d8%a7%db%8c-css/#respond Fri, 22 Jan 2016 15:48:51 +0000 http://tarahan.com/?p=5373 […]]]> فیلترهای CSS و نحوه کارآیی آن‌ها

فیلترهای CSS ابزاری قدرتمند هستند که بوسیله آن ها می توان جلوه های ویژه ای به تصاویر موجود در سایت بخشید.

استفاده از این فیلترها ساده است به شرطی که کارآیی تمامی پارامترها مشخص باشد. در مثال پایین،

img { -webkit-filter: grayscale(50%); }

اولین چیزی که به چشم می خورد، پیشوند webkit است. بعد از آن، یک پارامتر و کمیت تغییرات (داخل پرانتز) آورده شده است. در مثال ذکر شده، پارامتر Grayscale بکار گرفته شده است و میزان این تغییر تا ۵۰ درصد است. چنانچه این مقدار به ۱۰۰ درصد برسد، عکس کاملاً سیاه و سفید می شود. نتیجتاً، این کمیت شدت اعمال تغییرات را نمایش می دهد.

انواع فیلترهای CSS

فیلترهای CSS انواع زیادی دارند که برخی رواج بیشتری دارند و برخی پرکاربردتر هستند. در این مقاله تعداد معدودی از فیلترها به همراه مثالی از کارآیی آن ها معرفی می‌شوند. عکس زیر، تصویر اصلی است که روی آن تغییرات انجام می شوند که با مقایسه تصاویر می توان به نحوه عملکرد فیلتر پی می برد.

a1 فیلترهای CSS

Grayscale

این پارامتر تصویر را سیاه و سفید می کند. هرچه شدت آن بیشتر باشد یعنی کمیت آن افزایش یابد، میزان تاثیر فیلتر بیشتر می شود.

img { -webkit-filter: grayscale(100%); }

b فیلترهای CSS

Sepia

فیلتر سبک غریی Sepia تغییراتی مشابه فیلتر Grayscale اعمال می کند.

img { -webkit-filter: sepia(100%); }

e1 فیلترهای CSS

Blur

فیلتر Blur بسیار شبیه ابزار Guassian Blur در فوتوشاپ عمل می کند و به نوعی تصویر را تار می نماید. با تعیین مقدار پیکسل این پارامتر می توان میزان وضوح تصویر را تغییر داد. همانطور که واضح است واحد کمیت این فیلتر پیکسل می باشد.

img { -webkit-filter: blur(10px); }

g1 فیلترهای CSS

img { -webkit-filter: blur(50px); }

h1 فیلترهای CSS

Saturation

میزان اشباع تصاویر یا saturation، یکی از فیلترهای CSS است که میزان وضوح رنگ را نشان می دهد. برعکس، فیلترهایی که در بالا اشاره شدند برای saturation بازه ای وجود ندارد و تا هر میزان که مطلوب است می توان میزان اشباع رنگ ها را افزایش داد.

img { -webkit-filter: saturate(200%); }

j فیلترهای CSS

img { -webkit-filter: saturate(2000%); }

k فیلترهای CSS

Contrast

فیلتر Contrast مشابه Saturation عمل می کند. چنانچه کمیت مورد نظر شما در بازه ۰ تا ۱۰۰ درصد باشد، رنگ تصویر کدر می شود و هرچه از ۱۰۰ درصد بالاتر رود، شدت رنگ افزایش می یابد.

img { -webkit-filter: contrast(50%); }

l فیلترهای CSS

img { -webkit-filter: contrast(500%); }

m فیلترهای CSS

Brightness

این فیلتر CSS یکی دیگر از فیلترهایی است که عملکردی مشابه Contrast و Saturation دارد. بازه ۰ تا ۱۰۰ آن رنگ تصویر را کدر می کند و مقدار بیشتر از ۱۰۰ رنگ تصویر را روشن می سازد.

img { -webkit-filter: brightness(50%); }

n فیلترهای CSS

img { -webkit-filter: brightness(500%); }

o فیلترهای CSS

Hue-rotation

Hue-rotation یکی از جالب ترین فیلترهای CSS است که با توجه به درجه رنگی مورد نظر شما، رنگ های تصویر را مطابق ترتیب رنگی در چرخه رنگ ها تغییر می دهد. چرخه رنگ ها از ۰ تا ۳۶۰ درجه رنگ های متفاوتی دارد. با انتخاب یک نقطه در بازه آن، رنگ ها تغییر می کنند.

img { -webkit-filter: hue-rotate(45deg); }

p فیلترهای CSS

img { -webkit-filter: hue-rotate(120deg); }

q فیلترهای CSS

img { -webkit-filter: hue-rotate(240deg); }

r فیلترهای CSS

Invert

فیلتر Invert رنگ های تصویر را معکوس می کند. تنها کاری که برای استفاده از این فیلتر باید بکنید این است که مشخص کنید تا چه میزان می خواهید تغییر در تصویر خود ایجاد کنید.

img { -webkit-filter: invert(100%); }

s فیلترهای CSS

محدودیت فیلترهای CSS

  •  یکی از محدودیت های اصلی فیلترها، پشتیبانی مرورگرها از آن هاست. همانطور که مشاهده کردید تمامی فیلترها پیشوند webkit دارند و این بدین معنی است که تنها در مرورگرهایی قابل استفاده هستند که از این ویژگی پشتیبانی می کنند (Chrome 7, Opera 20, Safari, Blackberry Browser, Firefox 34, Android Browser). 
  • محدودیت بعدی به زمان بارگذاری سایت بر می گردد که با استفاده از فیلترهای CSS این زمان افزایش یافته و درنتیجه کارآیی سایت را کاهش می دهد.

 منبع: webdesignviews.com

]]> http://tarahan.com/%d9%81%db%8c%d9%84%d8%aa%d8%b1-%d9%87%d8%a7%db%8c-css/feed/ 0 طراحی های منحصر بفرد صفحات ” تماس با ما “ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%87%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8%d9%81%d8%b1%d8%af-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d8%aa%d9%85%d8%a7%d8%b3-%d9%85%d8%a7/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%87%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8%d9%81%d8%b1%d8%af-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d8%aa%d9%85%d8%a7%d8%b3-%d9%85%d8%a7/#respond Tue, 19 Jan 2016 13:24:41 +0000 http://tarahan.com/?p=5345 […]]]> یکی از مهم ترین جوانب طراحی وب سایت، طراحی جالب توجه صفحه تماس با ما می باشد. زمان مراجعه کاربران به صفحه تماس با ما حداقل کاری که صاحب سایت می‌تواند بکند این است که آن ها را تشویق به تکمیل فرم تماس کرده و به نحوی کاربران را به مراجعین دائمی سایت مبدل کند. در ادامه، مجموعه ای از طراحی های شگفت انگیزی در زمینه صفحه تماس با ما آورده شده است که می توانند الهام بخش خوبی برای شما باشند.

Pixel Wrapped

2 PixelWrapped طراحی های منحصر بفرد صفحات تماس با ما

استودیو طراحی Pixel Wrapped یک وکتور ساده اما جالب را بعنوان صفحه تماس با ما در نظر گرفته است. همانطور که می بینید فرم اطلاعات به صورت برگه ماشین تایپ در نظر گرفته شده است. اطلاعات تماس هم با فونت دست نویس روی یک برد آورده شده‌اند.

Ashes & Milk

5 AshesandMilk طراحی های منحصر بفرد صفحات تماس با ما

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

Lionways

6 Lionways طراحی های منحصر بفرد صفحات تماس با ما

سایت Lionways برای صفحه تماس با ما پیش زمینه ای از چوب را انتخاب کرده و از تصویر یک کارت پستال برای فرم اطلاعات استفاده نموده است. دو نکته جالب توجه در این صفحه دیده می شود: ۱) منوی راهنمای سایت به شکل یک رسید قرار داده شده است و ۲) در طراحی کارت پستال از تصویر یک تمبر سال ۱۹۲۳ انتخاب شده است که حسی نوستالژیک را می رساند.

Digital Base

11 DigitalBase طراحی های منحصر بفرد صفحات تماس با ما

 یکی از متمایزترین صفحات تماس با ما مربوط به سایت Digital Base می باشد که با در بر داشتن تصویر یک پیغام در بطری شیشه‌ای، بهترین نماد تماس و ارسال پیام توسط کاربران می‌باشد.

Brown’s Court Bakery

14 BrownsCourtBakery طراحی های منحصر بفرد صفحات تماس با ما

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

Fat Fish

16 FatFish طراحی های منحصر بفرد صفحات تماس با ما

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

بطور کلی نمونه های بالا بصورت تصادفی بعنوان بهترین‌های صنعت دیجیتال معرفی نشده اند و بدلیل تاثیری که بر کابران داشتند توانسته اند به همچین موفقیتی دست یابند. بخش تماس با ما یکی از کلیدی ترین بخش های هر سایت است که با سبک خاص خود می تواند هر مراجعه کننده ای را به یک کاربر دائمی تبدیل کند.

منبع: webdesignviews.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%87%d8%a7%db%8c-%d9%85%d9%86%d8%ad%d8%b5%d8%b1-%d8%a8%d9%81%d8%b1%d8%af-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d8%aa%d9%85%d8%a7%d8%b3-%d9%85%d8%a7/feed/ 0 افزایش سطح دسترسی وردپرس http://tarahan.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b7%d8%ad-%d8%af%d8%b3%d8%aa%d8%b1%d8%b3%db%8c-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/ http://tarahan.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b7%d8%ad-%d8%af%d8%b3%d8%aa%d8%b1%d8%b3%db%8c-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/#respond Tue, 19 Jan 2016 07:22:23 +0000 http://tarahan.com/?p=5322 […]]]> هرچه سطح دسترسی وردپرس بهتر باشد، افراد بیشتری می توانند به آن سایت مراجعه کنند.

آیا سایت ورد پرس شما قابل دسترسی است؟ این موضوع از اهمیت بالایی برخوردار است چراکه هرچه افراد بیشتری به سایت شما مراجعه کنند این برای اعتبار سایت بهتر است. دسترسی آسان به یک سایت منجر به بهینه سازی موتورهای جستجو شده و استفاده از آن را برای کاربران راحت می سازد. افزایش دسترسی وردپرس یک سایت کار چندان دشواری نیست ولی بسیاری از افراد نمی دانند باید از کجا شروع کنند.

تیم دسترسی

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

plugin های دسترسی

wp accessibility plugin 1 افزایش سطح دسترسی وردپرس

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

لینک دانلود plugin دسترسی وردپرس

لینک سایر plugin های دسترسی

سطح دسترسی تم

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

 لینک دانلود تم ها

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b7%d8%ad-%d8%af%d8%b3%d8%aa%d8%b1%d8%b3%db%8c-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/feed/ 0 معرفی plugin های پرکاربرد در وردپرس http://tarahan.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c-plugin-%d9%87%d8%a7%db%8c-%d9%be%d8%b1%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%af-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/ http://tarahan.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c-plugin-%d9%87%d8%a7%db%8c-%d9%be%d8%b1%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%af-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/#respond Mon, 18 Jan 2016 08:08:01 +0000 http://tarahan.com/?p=5301 […]]]> انتخاب plugin های مناسب بستگی به کارآیی سایت مورد نظر دارد اما در این مقاله با در نظر گرفتن انواع سایت ها با مضامین متفاوت، plugin های پرکاربردی را معرفی می‌کنیم:

۱) All in One SEO

all in one seo pack plugin معرفی plugin های پرکاربرد در وردپرس

این plugin بطور خودکار وردپرس را برای موتورهای جستجو مانند گوگل بهینه سازی می کند.

۲) Custom Content Shortcode

Custom Content Shortcode e1422900678659 معرفی plugin های پرکاربرد در وردپرس

با استفاده از این plugin می توان پست ها، صفحات، تصاویر، ضمائم، نظریات، فایل ها و منوها را نمایش داد.

۳) Jetpack

jetpack معرفی plugin های پرکاربرد در وردپرس

Jetpack  یکی از انواع plugin هاست که شرایط ویژه ای از قبیل:حجم، محتوا، عملکرد و ابزار برای کاربران سایت وردپرس فراهم می کند.

۴) Ninja Forms

ninja forms 600x442 معرفی plugin های پرکاربرد در وردپرس

برای ایجاد هرگونه فرم و فهرستی مانند فهرست مخاطبین، فهرست مجموعه ایمیل ها و غیره در وردپرس می توانید از Ninja Forms استفاده نمایید.

 ۵) Simple Follow Me Social Buttons Widget

Simple Follow Me Social Buttons Widget 500x167 معرفی plugin های پرکاربرد در وردپرس

این plugin آیکون های شبکه های اجتماعی را برای سیستم نمایش Retina ارائه می دهد.

۶) Duplicator

Untitled معرفی plugin های پرکاربرد در وردپرس

این plugin کل سایت را از مکانی به مکان دیگر کپی و منتقل کرده و از آن فایل پشتیبانی تهیه می کند.

۷) Groups

groups معرفی plugin های پرکاربرد در وردپرس

Groups یکی از plugin های بسیار کارآمد است که مدیریت عضویت کاربران و کنترل دسترسی به محتوا را برعهده دارد.

۸) Login-Logout

login logout معرفی plugin های پرکاربرد در وردپرس

 این plugin برای لینک های ورود، خروج، ادمین و ثبت نام است و به راحتی می توان آن را جایگزین plugin  پیش فرض Meta  قرار داد.

۹) MailChimp Forms by MailMunch

mailchimp معرفی plugin های پرکاربرد در وردپرس

برترین plugin برای ثبت مشترکین ایمیل می باشد و براحتی قابل استفاده است.

۱۰) Users Ultra

users ultra معرفی plugin های پرکاربرد در وردپرس

یک plugin ایده‌آل برای ایجاد شبکه ها و اجتماعات کاربری که براحتی قابل استفاده است.

جهت دانلود رایگان هر یک از plugin ها بر روی نام آن ها کلیک نمایید.

منبع: www.creativebloq.com

]]> http://tarahan.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c-plugin-%d9%87%d8%a7%db%8c-%d9%be%d8%b1%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%af-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/feed/ 0 راهکارهای ساده برای حفظ امنیت وردپرس http://tarahan.com/%d8%b1%d8%a7%d9%87%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%ad%d9%81%d8%b8-%d8%a7%d9%85%d9%86%db%8c%d8%aa-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/ http://tarahan.com/%d8%b1%d8%a7%d9%87%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%ad%d9%81%d8%b8-%d8%a7%d9%85%d9%86%db%8c%d8%aa-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/#respond Sun, 17 Jan 2016 10:54:36 +0000 http://tarahan.com/?p=5273 […]]]>  وردپرس معروف ترین سیستم مدیریت محتوا (CMS) در وب است که بر پایه زبان برنامه نویسی PHP و سامانه مدیریت پایگاه داده‌ها mySQL توسعه یافته است. از آنجایی که وردپرس در بسیاری از وب سایت ها بکار گرفته می شود چنانچه هرگونه اشکالی بعلت نبود امنیت ایجاد شود می تواند به شدت تمامی وب سایت ها را تحت تاثیر خود قرار دهد.

این مقاله به شما توضیح می دهد که چگونه می توانید امنیت وردپرس خود را تامین نمایید.

essential راهکارهای ساده برای حفظ امنیت وردپرس

۱) بررسی دقیق امنیت سیستم کامپیوتری

اولین قدم در این زمینه، حصول اطمینان از امنیت سیستم های کامپیوتری و سرورهای سایت است. بهتر است آخرین نسخه مرورگر و نرم افزار ضدویروس روی سیستم شما نصب باشد. در نظر داشته باشید که هر مشکل امنیتی در بخش نرم افزاری یا سخت افزاری سیستم می تواند وردپرس را تحت تاثیر قرار دهد.

 ۲) بروز رسانی وردپرس

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

۳) گزارش آسیب ها

 چنانچه به لحاظ امنیتی سیستم شما با آسیب هایی مواجه است بهتر است به قسمت security سایت وردپرس ایمیل ارسال کرده و جزئیات آسیب را گزارش کنید و اگر آسیب ها در زمینه plugin باشند، گزارش را به قسمت plugin سایت بفرستید.

۴) بررسی کدهای مخرب

بهتر است گاهاً plugin هایی مانند Exploit Scanner نصب کنید تا وجود کدهای مخرب را بررسی کند. اگرچه این اسکنر مستقیماً مشکلات را برطرف نمی کند ولی جزئیاتی را در اختیار شما قرار می دهد که به کمک آن ها می توانید اقدامات لازم را انجام دهید.

 ۵) از کار انداختن HTML در مواقع ضرورت

وردپرس برای عملکردهای متنوع از HTML خاصی استفاده می کند. اگر وجود یک HTML برای سایت ضروری نیست، بهتر است مانع از ادامه فعالیت آن شوید.

۶) پنهان سازی فهرست ها

بهتر است مانع از دسترسی عمومی به فهرست ها شوید. اگر افراد دیگر، قادر به استفاده از فایل های شما در وردپرس باشند براحتی می توانند از فایل ها سوء‌استفاده کرده و به سایت شما آسیب وارد کنند.

۷) ایجاد فایل پشتیبانی

WP-DB Manager برای پشیبانی گرفتن از وردپرس است. علاوه براین، نسبت به آسیب های mySQL نیز هشدار می دهد و شما را از اشکالات احتمالی مطلع می سازد. سعی کنید تا بدرستی از محتوای سایت خود فایل پشتیبانی ایجاد کنید. در بدترین شرایط، فایل پشتیبانی به شما کمک می کند تا براحتی محتوای سایت خود را ذخیره نمایید. با استفاده از WP-DB Manager، می توانید فایل پشتیبانی آنلاین نیز ایجاد کنید. چنانچه فایل پشتیبانی توسط plugin ایجاد شود در ایمیل یا سیستم کامپیوتری شما ذخیره می شود.

۸) نصب plugin های امنیتی

پیشتر یک plugin تحت عنوان Exploit Scanner معرفی شد که به شما کمک می کند آسیب های احتمالی سایت را شناسایی کنید. plugin های دیگری نیز هستند که در صورت نصب، وردپرس شما را بطور چشمگیری تحت تاثیر قرار می دهد. plugin دیگری که در این زمینه می توان نام برد WP Security Scan است که علاوه بر بررسی آسیب ها، راهکارهای خوبی در خصوص بلاک کردن عوامل آسیب رسان ارائه می دهد.

Login Encryption یکی دیگر از plugin هاست که از الگوریتم های DEA و RSA برای ارتقای امنیت وردپرس استفاده می کند.

 ۹) نصب برخی plugin های لازم در پنل ادمین

  • Limit Login Attempts یکی از plugin هایی است که به کمک آن می توانید تعداد دفعات تلاش برای ورود به وردپرس را محدود سازید. علاوه براین مانع از ورود عوامل آسیب رسان می شود.
  • User Locker نیز plugin دیگری است که تعداد دفعات تلاش برای ورود غیرمجاز افراد را محدود می کند.
  • Admin SSL Secure Plugin یکی از plugin هایی است پنل وردپرس را با SSL کدگذاری کرده و از آن محافظت می کند.
  • یکی از روش های محافظت از وردپرس تغییر پیش فرض هاست. Stealth Login یه شما کمک می کند تا URL های خاصی را برای ورود و خروج از سایت ایجاد کنید.
  • یکی از plugin های ضروری Antivirus است که ویروس ها و سایر مزاحمت های سایت را پیدا می کند. برای کارآیی بهتر این plugin بهتر است همیشه بروزرسانی شود.

۱۰) انتخاب صحیح plugin ها

همیشه به یاد داشته باشید plugin هایی را برای نصب انتخاب کنید که در پنل ادمین یا از طریق سایت وردپرس به شما پیشنهاد می شوند. اگرچه منابع دیگری هستند که plugin های متنوع معرفی می کنند ولی ریسک آسیب رسانی به وردپرس نیز افزایش می یابد. plugin هایی که بطور رسمی معرفی می شوند کاملاً مطمئن بوده و از بابت عوامل مخرب مورد بررسی قرار گرفته اند.

حفظ امنیت وردپرس همانند سایر بخش های حوضه IT حائز اهمیت می باشد. بدین ترتیب، شما از امنیت سرورهای سایت، سیستم های کامپیوتری کاربران و تبلت ها و گوشی های همراه هوشمند نیز محافظت نموده اید. از آنجایی که وردپرس یکی از سیستم های رایج مدیریت محتوا می باشد داشتن دانش لازم در زمینه محافظت از آن امری مهم است.

منبع: www.creativebloq.com

 

]]> http://tarahan.com/%d8%b1%d8%a7%d9%87%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%af%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%ad%d9%81%d8%b8-%d8%a7%d9%85%d9%86%db%8c%d8%aa-%d9%88%d8%b1%d8%af%d9%be%d8%b1%d8%b3/feed/ 0 ۷ ابزار پر کاربرد CSS http://tarahan.com/7-%d8%a7%d8%a8%d8%b2%d8%a7%d8%b1-%d9%be%d8%b1-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%af-css/ http://tarahan.com/7-%d8%a7%d8%a8%d8%b2%d8%a7%d8%b1-%d9%be%d8%b1-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%af-css/#respond Sat, 16 Jan 2016 11:09:38 +0000 http://tarahan.com/?p=5256 […]]]> CSS یک زبان برنامه نویسی است که به طراحان وب کمک می کند تا طراحی های ظریف و جالبی از خود خلق کنند و زمانی که یک وب سایت مجهز به کدهای بی عیب و نقص CSS می شود، بدون هیچ ایرادی به نمایش گذاشته می شود. درنتیجه، سرعت بارگذاری بالا خواهد بود، هیچ خطایی وجود نخواهد داشت و از ویژگی های طراحی Responsive یا واکنش گرا برخوردار خواهد بود. ولی برای بهینه سازی استفاده از CSS می توان از ابزارهایی کمک گرفت که کارآیی آن را افزایش می دهند.

CSS Lint

a 7 ابزار پر کاربرد CSS

CSS Lint ابزاری قدرتمند برای پاک کردن المان های حجیم و اضافی CSS می باشد. زمانی که از CSS Lint استفاده می کنید، هر عملکردی با توضیحات کامل در اختیار شما قرار خواهد گرفت و این در حالی است که سایر ابزارها بطور خلاصه دستورالعملی را به شما ارائه می دهند. CSS Lint عناصر CSS را بهینه کرده و منجر به بالا رفتن کارآیی سایت می شود.

مراجعه به سایت: CSS Lint

Pure CSS

b 620x339 7 ابزار پر کاربرد CSS

همانطور که از نامش معلوم است Pure CSS زبان برنامه نویسی CSS را در تمام زمان ها بهینه می کند. این ابزار توسط شرکت معتبر و چند ملیتی Yahoo طراحی و توسعه یافته است و مجموعه ای از ماژول هاست که برای تکمیل پروژه های مربوط به طراحی سایت بکار گرفته می شود.

 مراجعه به سایت: Pure CSS

Dirty Markup

c 620x344 7 ابزار پر کاربرد CSS

Dirty Markup یکی از ابزارهای انحصاری است که عملکردی بینظیر دارد و بی‌نظمی موجود در کدها را حذف می کند و ساختاربندی چشمگیری را ایجاد می‌کند. برنامه Dirty Markup این مشخصه را مدیون مجموعه ای از تکنولوژی های مورد نیاز از قبیل HTML Tidy ,CSS Tidy ,JS Beautify و Ace Editor می باشد.

 مراجعه به سایت: Dirty Markup

CSS Trashman

d 620x485 7 ابزار پر کاربرد CSS

همانطور که از اسم این ابزار مشخص است، CSS Trashman تمامی فایل های اضافی ایجاد شده در CSS را پاک می کند. داشتن فایل CSS مرتب، همیشه کار آسانی نیست ولی با وجود همچین ابزار جامعی، براحتی می توان عملکرد بهتری در CSS را تجربه کرد.

مراجعه به سایت: CSS Trashman

CSS Beautifier

g 7 ابزار پر کاربرد CSS

CSS Beutifier یکی از ابزارهایی است که اشتباهات و عیوب کدها را پاک کرده و آن ها را زیباسازی می نماید و بدین ترتیب CSS را قادر می سازد تا عملکرد سایت را بهبود بخشد. CSS Beautifier با داشتن ویژگی های مورد نیاز شما،‌ منجر می شود تا بدون وجود هرگونه مزاحمی براحتی با CSS کار کنید.

مراجعه به سایت: CSS Beautifier

CSS Blueprint

h 7 ابزار پر کاربرد CSS

بسیاری از طراحان وب سایت بطور روزمره از CSS Blueprint استفاده می کنند چراکه در این برنامه انواع عملکردهای معمولی CSS از پیش بارگذاری شده است که در این صورت دیگر نیازی به نوشتن حجم عظیمی از کدها نیست. علاوه براین، مجموعه ویژگی های Blueprint می تواند در plugin های خاصی مورد استفاده قرار بگیرد.

 مراجعه به سایت: Blueprints

Glue


f 620x463 7 ابزار پر کاربرد CSS

یکی از عوامل بزرگی که منجر به کند شدن سرعت بارگذاری سایت می شود، وجود عکس های حجیم است. به همین خاطر، پیشنهاد می شود که فایل ها را با هم ادغام کرده و در یک فایل قرار داد. فرآیند یکی سازی عکس ها توسط برنامه Glue اجرا می شود تا بعد بتوان از فایل مذکور در CSS Sprite استفاده شود.

مراجعه به سایت: Glue

منبع: www.webdesign-inspiration.com

]]> http://tarahan.com/7-%d8%a7%d8%a8%d8%b2%d8%a7%d8%b1-%d9%be%d8%b1-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%af-css/feed/ 0 تقابل UX و SEO در طراحی سایت (بخش دوم) http://tarahan.com/%d8%aa%d9%82%d8%a7%d8%a8%d9%84-seo-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%aa%d9%82%d8%a7%d8%a8%d9%84-seo-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Wed, 13 Jan 2016 13:11:19 +0000 http://tarahan.com/?p=5229 […]]]>  زمان طراحی سایت، دو نکته مهمی که باید مورد توجه قرار بگیرند UX design (طراحی تجربه کاربر) و SEO (بهینه سازی برای موتورهای جستجو) می باشند.

در حالی که هر دو مقوله به نوعی هدف نهایی طراحی سایت و ارائه خدمات می باشند، در عمل هر کدام برای دو قشر متفاوت فعالیت می کنند. طراحان UX تنها به کاربران توجه می کنند ولی افراد متخصص در زمینه SEO به تنها مسئله‌ای که اهمیت می دهند، الگوریتم های جستجو می باشد.

برخی اطلاعات نادرست در زمینه UX design و SEO

بسیاری از روش هایی که در زمینه SEO معرفی شده‌اند، امروزه دیگر کاربردی ندارند و درباره آن ها تصورات اشتباهی شکل گرفته است.

  • تصور اشتباه بر این است که استفاده از تصاویر توجه کاربران را جلب می کند.

حقیقت این است که چنانچه کیفیت تصاویر خیلی بالا باشد باعث می شود که صفحه دیر بارگذاری شود و این امر بر مقوله‌های UX design و SEO تاثیر منفی دارد.

  • تصور اشتباه این است که طراحی ساده می تواند موجب خستگی کاربر شود.

حقیقت این است که طراحی توجه کاربر را جلب می کند که بتواند به وضوح کاربر را هدایت کرده و موجب گیجی وی نشود. بهتر است در منوها هر آنچه که ضروری است قرار داده شود و از شلوغی بیش از حد پرهیز شود.

  • تصور اشتباه بر این است که متون قرار گرفته در پایین صفحه توسط کاربران خوانده نمی شوند.

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

در ادامه مثال هایی از راهکارهایی به شما ارائه می دهیم که می توانند بر UX design و SEO تاثیر مثبت بگذارند.

نقشه سایت

sitemap 1 تقابل UX و SEO در طراحی سایت (بخش دوم)

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

الگوهای جستجو در سایت

navigation تقابل UX و SEO در طراحی سایت (بخش دوم)

بهتر است در طراحی سایت خود از الگوهایی برای هدایت کاربران استفاده نمایید تا براحتی بتوانند در سایت جستجو کنند. در این زمینه بهتر است به مبحث ساده‌گرایی در صفحه آرایی نیز توجه کرده و خیلی صفحات سایت را شلوغ نکنید. همانطور که در تصویر بالا دیده می شود، وب سایت .BigDrop Inc به بهترین شکل در پایین صفحه نحوه هدایت کاربران در سایت را نمایش داده است.

Breadcrumbs

breadcrumb تقابل UX و SEO در طراحی سایت (بخش دوم)

وجود راهنمای Breadcrumb در سایت هم به موتورهای جستجو و هم به کاربران اجازه می دهند تا بدانند در چه بخشی از سایت هستند و چگونه وارد آن قسمت شده‌اند.

بارگذاری سریع سایت

گوگل و کاربران هر دو از بارگذاری کند سایت ابراز نارضایتی می کنند. بطور ایده آل، بارگذاری هر سایت باید زیر ۵ ثانیه بطول بیانجامد. در صورتی که بیشتر از این مدت طول بکشد از کاربری سایت شما کاسته خواهد شد.

منبع: www.awwwards.com

]]> http://tarahan.com/%d8%aa%d9%82%d8%a7%d8%a8%d9%84-seo-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 تقابل UX و SEO در طراحی سایت (بخش اول) http://tarahan.com/%d8%aa%d9%82%d8%a7%d8%a8%d9%84-seo-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/ http://tarahan.com/%d8%aa%d9%82%d8%a7%d8%a8%d9%84-seo-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/#respond Wed, 13 Jan 2016 13:03:53 +0000 http://tarahan.com/?p=5239 […]]]> زمان طراحی سایت، دو نکته مهمی که باید مورد توجه قرار بگیرند UX design (طراحی تجربه کاربر) و SEO (بهینه سازی برای موتورهای جستجو) می باشند.

در حالی که هر دو مقوله به نوعی هدف نهایی طراحی سایت و ارائه خدمات می باشند، در عمل هر کدام برای دو قشر متفاوت فعالیت می کنند. طراحان UX تنها به کاربران توجه می کنند ولی افراد متخصص در زمینه SEO به تنها مسئله‌ای که اهمیت می دهند، الگوریتم های جستجو می باشد.

UX design و SEO  ظاهراً اولویت های متفاوتی دارند. اغلب، این طور به نظر می آید که این دو مبحث در مقابل هم هستند. درست یا غلط این باور، بسیار رایج است. برای بقای طولانی مدت یک وب سایت، توجه به هر دو مقوله حائز اهمیت است و تشخیص در اولویت قرار گرفتن هر کدام امری است دشوار و دلیل آن فعالیت متقابل این دو است.

چگونه می توان UX design و SEO را در کنار هم بکار گرفت و راه حلی کاربردی برای حل مشکل بین این دو پیدا کرد؟

مشکلات بین UX design و SEO

ux vs seo awwwards 1 تقابل UX و SEO در طراحی سایت (بخش اول)

۱) محتوای سایت: اختلاف رایج میان UX design و SEO

غالباً اختلاف بین UX design و SEO از ساختار شروع شده و به محتوا ختم می شود. زمان طراحی وب سایت هدف شما برطرف ساختن برخی نیازهاست ولی مهم‌تر از همه این است که باید توجه خود را به نیازهای کاربران معطوف نمایید یا به نیازهای مرتبط با سیستم جستجو.

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

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

۲) کلمات کلیدی

 این مشکل دیگر تبدیل به کلیشه شده است. متخصصین SEO می دانند که پر کردن متن با کلمات و عبارات کلیدی همیشه نمی تواند در بهینه سازی برای موتورهای جستجو نقش موثری داشته باشد.

به عبارت دیگر، لازم است به یاد داشته باشید که استفاده از کلمات کلیدی نباید در برخی قسمت های متن صورت بگیرد:

 A) فوتر

B) در بخش metadata

C) در بخش alternative text

D) در CSS

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

۳) لغات دل نشین و مناسب

برخی از متخصصین در حیطه SEO تلاش می کنند تا برای جلوگیری از تکرار کلمات کلیدی از لغات سخت استفاده نمایند اما متاسفانه، این راه حل مناسبی نیست و همچنان تکرار در متن وجود خواهد داشت. علاوه بر این، بکارگیری لغات دشوار عامل از بین رفتن انگیزه کاربر می شود.

پیشنهاد ما بر این است که در تمامی مراحل تولید محتوا تعادل را در نظر گرفته، از تکرار کلمات و استفاده از لغات ثقیل بپرهیزید.

۴) سایت های تک صفحه ای و SEO

یکی از اشتباهات متداول، طراحی سایت تک صفحه ای است. اینگونه سایت ها از دیدگاه UX بسیار مناسب هستند چرا که تمامی مطالب را در یک صفحه گردآوری کرده اند. علاوه بر این، از آن جایی که سایت های تک صفحه ای از ویژگی های هنری زیبایی مانند طراحی اسکرول پارالاکس استفاده می کنند، توجه کاربران بیشتر به خود جلب می‌نمایند. اما، در زمینه سایت های تک صفحه ای، باید در نظر داشت که خیلی از شرایط SEO رعایت نمی شوند بعنوان مثال نمی توان از لینک های داخلی استفاده کرد و یا این امکان وجود ندارد که به راحتی محتوای سایت را تغییر داده و مطالب جدید در آن قرار داد.

در این شرایط، اگر همچنان تمایل دارید که سایت خود را بصورت تک صفحه ای طراحی کنید به نکاتی که می توانند امتیاز SEO را برای شما ارتقا دهند، توجه بیشتری داشته باشید.

 منبع: www.awwwards.com

]]> http://tarahan.com/%d8%aa%d9%82%d8%a7%d8%a8%d9%84-seo-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/feed/ 0 طراحی اسکرول پارالاکس http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d9%be%d8%a7%d8%b1%d8%a7%d9%84%d8%a7%da%a9%d8%b3/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d9%be%d8%a7%d8%b1%d8%a7%d9%84%d8%a7%da%a9%d8%b3/#respond Tue, 12 Jan 2016 14:13:47 +0000 http://tarahan.com/?p=5194 […]]]> در گذشته افکت پارالاکس در بازی‌های کامپیوتری مورد استفاده قرار گرفت ولی امروزه طراحی اسکرول پارالاکس به یکی از اجزای لاینفک در طراحی وب سایت مبدل شده‌ است. در این افکت از پس‌زمینه‌های (background) متنوعی استفاده شده که با سرعت‌های متفاوت حرکت کرده و به نوعی به تصویر عمق می دهند (یعنی افکت faux-3D ایجاد می‌کند). لغت انگلیسی parallax از کلمه یونانی Parallaxis استفاده شده که به معنای تغییر می باشد.

در این مقاله، ۱۰ سایت معرفی می شوند که بهترین نمونه‌ها از طراحی اسکرول پارالاکس در آن ها بکار گرفته شده است (برای مشاهده هر یک از وب سایت ها روی تصاویر کلیک کنید).

سایت .Melanie F 

awwwards parallax 30 melanie طراحی اسکرول پارالاکس

سایت L’amour Fou

lamorfou طراحی اسکرول پارالاکس

سایت Giampiero Bodino

giampiero bodino طراحی اسکرول پارالاکس

سایت Madwell

parallax scrolling websites 2013 16 طراحی اسکرول پارالاکس

سایت L’amour Fou

PORCHEVOLUTION طراحی اسکرول پارالاکس

سایت Antone and Irene

anton and irene طراحی اسکرول پارالاکس

سایت Parallaxis 

parallaxis طراحی اسکرول پارالاکس

 سایت Urban Walks

urban walks طراحی اسکرول پارالاکس

سایت Life of PI

parallax scrolling websites 2013 08 طراحی اسکرول پارالاکس

سایت Sweez

cupcakes طراحی اسکرول پارالاکس

منبع: www.awwwards.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d9%be%d8%a7%d8%b1%d8%a7%d9%84%d8%a7%da%a9%d8%b3/feed/ 0 ۱۰فونت برتر قلم مو http://tarahan.com/10%d9%81%d9%88%d9%86%d8%aa-%d8%a8%d8%b1%d8%aa%d8%b1-%d9%82%d9%84%d9%85/ http://tarahan.com/10%d9%81%d9%88%d9%86%d8%aa-%d8%a8%d8%b1%d8%aa%d8%b1-%d9%82%d9%84%d9%85/#respond Tue, 12 Jan 2016 09:52:48 +0000 http://tarahan.com/?p=5166 […]]]> ۱۰ فونت رایگان قلم مو برای طراحان

فونت های مربوط به خانواده قلم مو حسی برگرفته از دست نوشته ها را به طراحی داده و ظاهری جالب دارند. در این مقاله ۱۰ فونت قلم موی برگزیده را معرفی کرده و آن‌ها را به رایگان در اختیار شما قرار می دهیم.

۱‌) قلم مو Beacon

beacon changed 10فونت برتر قلم مو

Beacon یکی از فونت های تایپوگرافی Serif است و این مزیت را دارد که می توان برخی از ویژگی های آن را تغییر داده و به نوعی آن را شخصی سازی کرد.

دانلود فونت Beacon

۲) قلم مو Ampad

ampad 10فونت برتر قلم مو

فونت Ampad یکی از فونت هایی است که برای کارهای هنری ترسناک مورد استفاده قرار می گیرد و دارای ۴ سبک متفاوت می باشد که با توجه به کارآیی یکی از آن ها را می‌توانید انتخاب کنید.

دانلود فونت Ampad

۳) قلم مو True Lies

true lies 10فونت برتر قلم مو

فونت True Lies بعنوان یکی از قلم های زمخت شناخته شده است چرا که با وجود Serif نبودن تایپوگرافی آن، هر حرف بطور خشنی پایان می یابد. اصطلاحاً گفته می شود که این فونت مانند بجا گذاشتن خط ترمز ماشین بر صفحه است.

دانلود قلم موی True Lies

۴) قلم مو Goatskin

goatskin brush 10فونت برتر قلم مو

ضربه های عریض قلم موی Goatskin فضایی آسیایی به نوشته ها می دهد. این فونت یکی از بهترین قلم موهایی است که با خط آسیای شرقی می توان حروف انگلیسی را به تحریر درآورد. گفته می شود هر طراحی باید این فونت را میان سایر ابزار نوشتاری خود داشته باشد چرا که یکی از کامل ترین فونت هاست.

دانلود فونت Goatskin

۵) قلم مو Surfing Capital

surfing capital 10فونت برتر قلم مو

قلم موی Surfing Capital فونتی است که به نظر می آید با آفتاب نورپردازی شده است و با لایه های مختلف سایه پردازی حسی آرامش بخش به بیننده منتقل می کند.

دانلود Surfing Capital

۶) قلم مو Levi Brushlevibrush 10فونت برتر قلم مو

قلم موی LeviBrush یکی از فونت های معروفی است که به علت نحوه پاشش رنگ، در کاور آلبوم های موسیقی خوانندگان مشهور مورد استفاده قرار گرفته است. نوع تغییر یافته این فونت نیز تحت عنوان Levi ReBrushed وجود دارد که با تغییراتی در نحوه پاشش رنگ شکل گرفته است.

دانلود فونت LeviBrush

۷) قلم موی Brush Hand New

brushhand 10فونت برتر قلم مو

قلم موی Brush Hand New بر پایه فونت Flash Bold طراحی شده است. در این طراحی جدید، کناره های حروف دیگر تیز نیستند و از سادگی بیشتری برخوردار هستند. درنتیجه، این فونت می تواند انتخابی ایده آل برای عناوین باشد.

دانلود فونت Brush Hand New

۸) قلم موی Paint Hand

painthand 1 10فونت برتر قلم مو

قلم موی Paint Hand فونتی است که برای محصولات و یا محتواهای متنی کودکانه بسیار پرکاربرد است و نظر این کاربران کوچک را شدیداً به خود جلب می کند. در طراحی این فونت، تایپوگرافی و گرافیک های متفاوتی استفاده شده است.

دانلود فونت Paint Hand

۹) قلم موی Cylburn

cylburn 10فونت برتر قلم مو

قلم مو Cylburn فونت نیمه پیوسته ای است که بر اساس قلم Roundhand طراحی شده است با این تفاوت که از کشیدگی کمتری برخوردار بوده و درنتیجه متمایز از سبک های سنتی می باشد.

دانلود فونت Cylburn

۱۰) قلم موی Mothproof Script

sp 720 10فونت برتر قلم مو

 

قلم موی Mothproof Script یکی از فونت های بسیار تاثیر گذار است که تا حدودی شبیه فونت سنتی blackletter طراحی شده ولی نسبت به آن خواناتر می باشد.

دانلود فونت Mothproof Script

 منبع: www.creativebloq.com

]]> http://tarahan.com/10%d9%81%d9%88%d9%86%d8%aa-%d8%a8%d8%b1%d8%aa%d8%b1-%d9%82%d9%84%d9%85/feed/ 0 چگونه می توان SEO سایت را در گوگل تشخیص داد؟ http://tarahan.com/%da%86%da%af%d9%88%d9%86%d9%87-%d8%aa%d9%88%d8%a7%d9%86-seo-%d8%b3%d8%a7%db%8c%d8%aa-%da%af%d9%88%da%af%d9%84-%d8%aa%d8%b4%d8%ae%db%8c%d8%b5-%d8%af%d8%a7%d8%af%d8%9f/ http://tarahan.com/%da%86%da%af%d9%88%d9%86%d9%87-%d8%aa%d9%88%d8%a7%d9%86-seo-%d8%b3%d8%a7%db%8c%d8%aa-%da%af%d9%88%da%af%d9%84-%d8%aa%d8%b4%d8%ae%db%8c%d8%b5-%d8%af%d8%a7%d8%af%d8%9f/#respond Mon, 11 Jan 2016 13:03:42 +0000 http://tarahan.com/?p=5156 […]]]> تشخیص سریع SEO سایت

بسیاری از کاربران تازه کار از قدرت بالای موتور جستجوگر گوگل در امور SEO آگاه نیستند. عملگرهای پیشرفته جستجو در این مقوله بسیار کارآمد هستند.

همراه با این مقاله و با کمک گوگل، روش های زیر را امتحان کنید:

googleseo چگونه می توان SEO سایت را در گوگل تشخیص داد؟

یکی از روش هایی که می توانید SEO سایت خود را تشخیص دهید این است که در گوگل، سایت خود را بصورت site:yourdomain.com جستجو کنید. تمامی صفحات فهرست شده به شما نمایش داده می شوند. در تصویر بالا، عبارت:۸۲۱ نتیجه” نشان دهنده تعداد تقریبی صفحات است. چنانچه تعداد صفحات خیلی زیاد باشد، یعنی شما با مشکل مواجه هستید.

چنانچه عبارت site:yourdomain.com inurl:www را جستجو کنید تنها صفحاتی که در URL خود www دارند نشان داده می شوند و اگر inurl:www- را استفاده کنید صفحاتی دیده می شوند که www را در URL ندارند. این عبارت برای یافتن دامنه های فرعی که تاکنون مورد توجه شما نبوده اند، بکار می آید.

با تایپ عبارت”site:yourdomain.com “text goes here صفحاتی در دامنه شما دیده می شوند که متن کاملاً مشابه با آنچه در جای text goes here تایپ کرده- اید، داشته باشند.

حال، با تغییر عبارت بصورت “site:yourdomain.com intitle:”text goes here صفحاتی به شما نشان داده می شوند که عباراتی دقیقاً مشابه با آنچه در <عنوان> تایپ کرده اید، داشته باشد.

یکی دیگر از تکنیک های پی بردن به SEO سایت جستجوی عبارت yourbrandname”-site:yourdomain.com” است که نتایج برند شما را بدون درنظر گرفتن جستجو در سایت خودتان، نشان می دهد. این روش کمک می کند تا دریابید در چه سایت هایی از برند شما یاد کرده اند.

و در نهایت، site:yourdomain.com filetype:pdf فایل های pdf را جستجو می کند. البته عملگر :filetype برای اغلب فرمت ها قابل استفاده هستند.

 منبع: ww.creativebloq.com

]]> http://tarahan.com/%da%86%da%af%d9%88%d9%86%d9%87-%d8%aa%d9%88%d8%a7%d9%86-seo-%d8%b3%d8%a7%db%8c%d8%aa-%da%af%d9%88%da%af%d9%84-%d8%aa%d8%b4%d8%ae%db%8c%d8%b5-%d8%af%d8%a7%d8%af%d8%9f/feed/ 0 نکات فراموش شده در مقوله بهینه سازی برای موتورهای جستجو (SEO) http://tarahan.com/%d9%86%da%a9%d8%a7%d8%aa-%d9%81%d8%b1%d8%a7%d9%85%d9%88%d8%b4-%d8%b4%d8%af%d9%87-%d9%85%d9%82%d9%88%d9%84%d9%87-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85/ http://tarahan.com/%d9%86%da%a9%d8%a7%d8%aa-%d9%81%d8%b1%d8%a7%d9%85%d9%88%d8%b4-%d8%b4%d8%af%d9%87-%d9%85%d9%82%d9%88%d9%84%d9%87-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85/#respond Mon, 11 Jan 2016 10:43:03 +0000 http://tarahan.com/?p=5138 […]]]> امروزه، بهینه سازی برای موتورهای جستجو یکی از جزئیات حائز اهمیت در طراحی وب سایت است. اگرچه مطالب متنوع و جالبی در زمینه نقاط مثبت SEO نوشته شده است ولی در این مقاله می خواهیم نکات فراموش شده در مبحث بهینه سازی برای موتورهای جستجو را بررسی کنیم.

۱) استفاده درست از تگ های h1 و h2

images نکات فراموش شده در مقوله بهینه سازی برای موتورهای جستجو (SEO)

عنوان ها و زیر عنوان ها هم برای صفحه آرایی و هم بهینه سازی برای موتورهای جستجو کارآمد هستند ولی این در شرایطی است که از آن ها بدرستی استفاده شود چرا که با کاربرد نادرست آن ها، سایت مذبور توسط کاربران و موتورهای جستجو کنار گذاشته می شود. مهم ترین بخش های هر صفحه ای می بایست با عناوین H1 و H2 و بعد بخش های کوچک تر با عناوین H4، H3 و غیره تگ شوند.

۲) حذف کدهای ناکارآمد

هدف از بهینه سازی سایت این است که میزان دسترسی برای کاربران و موتورهای جستجو افزایش یابد. این مطلب به کدهای بکار گرفته شده در وب سایت هم بستگی دارد. در این شرایط بهتر است از XHTML Validator استفاده شود تا کدهای بکارگرفته شده، خوانا و کارآمد باشند.

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

۳) لینک های داخلی

کاربران به لینک های داخلی هر صفحه توجه بسیاری دارند و این لینک ها در بهینه سازی برای موتورهای جستجو نیز بسیار کارآمد هستند. بهتر است از لینک به مطالب مرتبط و کامل استفاده کنید. علاوه براین، به یاد داشته باشید که بیش از ۲ لینک در یک صفحه خیلی نمی تواند به بالا رفتن کارآیی سایت شما کمک کند و به نحوی معنی به نظر می رسد چرا که باعث می شود کاربر اذیت شده و دیگر فکر مراجعه مجدد به سایت شما را نکند.

و بعنوان آخرین نکته که از اهمیت بالایی برخوردار است گفته می شود که به مطالب غیر مرتبط لینک نکنید و سعی کنید ارتباط بین محتوا را حفظ کنید.

۴) لینک های پاورقی

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

۵) عدم استفاده از تصاویر بعنوان لینک

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

۶) URL

logo url نکات فراموش شده در مقوله بهینه سازی برای موتورهای جستجو (SEO)

در زمینه بهینه سازی برای موتورهای جستجو نه تنها محتوای سایت حائز اهمیت است بلکه درنظر گرفتن URL مناسب هم رتبه بندی سایت را در موتورهای جستجو ارتقا می‌دهد.

 ۷) استفاده از تگ های Noarchive و Noindex

 تصور برخی مردم بر این است که باید تمامی محتوای سایتشان توسط موتورهای جستجو بررسی شوند. دلیلی وجود ندارد که صفحاتی از قبیل “درباره ما” و یا “خط مشی” نیز خوانده شوند. بهترین روش در زمینه بهینه سازی برای موتورهای جستجو این است که تنها صفحات مهم سایت توسط موتورها بررسی شوند. در نظر داشته باشید که در استفاده از تگ های Noarchive و Noindex زیاده روی نکنید چون در آن صورت مطلبی برای یافتن باقی نخواهد ماند.

۸) استفاده  از Bookmark اجتماعی

بکارگیری Bookmark اجتماعی هم برای کاربران سایت و هم در بهینه سازی برای موتورهای جستجو کارآمد است چرا که Bookmark ها نه در مرورگر بلکه در سایت ذخیره می‌شوند و درنتیجه به آسانی قابل اشتراک هستند. بهتر است مراقب لینک هایی باشید که می توانند لینک Bookmark های شما را مخدوش کرده و کارایی آن ها را پایین آورند. پس برای حل این مشکل می توان از تگ “Nofollow” استفاده کرد.

۹) عدم بکارگیری بیش از حد از Ajax

AJAX logo by gengns نکات فراموش شده در مقوله بهینه سازی برای موتورهای جستجو (SEO)

یکی از بزرگ ترین اشتباهاتی که طراحان وب سایت ها می کنند استفاده بیش از حد معمول از Ajax برای تحت تاثیر قرار دادن کاربران است. از مشکلات Ajax این است که موتورهای جستجو نمی توانند آن ها را پیدا کنند، کاربران قادر به اشتراک گذاشتن آن ها نیستند و علاوه بر این URL مجدداً بارگذاری نمی شود.

منبع: justcreative.com

]]> http://tarahan.com/%d9%86%da%a9%d8%a7%d8%aa-%d9%81%d8%b1%d8%a7%d9%85%d9%88%d8%b4-%d8%b4%d8%af%d9%87-%d9%85%d9%82%d9%88%d9%84%d9%87-%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85/feed/ 0 بهینه سازی برای موتور جستجو(SEO) http://tarahan.com/%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85%d9%88%d8%aa%d9%88%d8%b1-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88/ http://tarahan.com/%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85%d9%88%d8%aa%d9%88%d8%b1-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88/#respond Sun, 10 Jan 2016 12:36:04 +0000 http://tarahan.com/?p=5126 […]]]> بهینه سازی برای موتور جستجو (SEO) یکی از اجزای اصلی در طراحی وب سایت است. بعنوان یک طراح، درک کامل بهینه سازی برای موتور جستجو از اهمیت بالایی برخوردار است. در این مقاله ۱۰ نکته مهم در زمینه بهینه سازی برای موتور جستجو برای طراحی وب سایت مورد بررسی قرار می گیرد.

نکته شماره صفر: تقلب نکنید.

تصور کنید وارد اتاقی شده اید که مملو از دانشمندان برجسته است. آیا شما می توانید آن ها را فریب دهید؟ هرگز. شرکت گوگل نیز از صدها اتاق تشکیل می شود که مملو از دانشمندان ماهری هستند که در هفته ۶۰ ساعت کار می کنند تا از هر گونه فریب گوگل جلوگیری کنند. در این شرایط جایی برای تقلب باقی نمی ماند. پس، سعی کنید تا وب سایتی زیبا، بی نقص و پرمحتوا طراحی کرده و با استفاده از تکنیک های کارآمد، آن را به یکی از پربازدیدکننده ترین سایت ها در موتورهای جستجو مبدل کنید.

نکته شماره یک: کلمات کلیدی 

 تعدادی کلمات و عبارات کلیدی برای شناساندن سایت خود تعیین کرده و در جاهای لازم استفاده کنید. تکرار بیجای آن ها می توند تاثیر منفی داشته باشد پس به اینکه در کدام جمله یا عبارت بکار برده شوند، دقت کنید.

نکته شماره دو: محتوای سایت

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

نکته شماره سه: کدها

سایت خود را با استفاده از ویرایشگر متن ساخته و محتوای آن را بطور واضح بوسیله HTML بنویسید. HTML باید ساختار مفهومی صفحه را دنبال کند. بهتر است از تگ- های توصیفی در مواقع لزوم استفاده نمایید. بعنوان مثال از تگ UL برای لیست ها، P برای پاراگراف ها، H برای عناوین و STRONG برای متون پررنگ و ضخیم (Bold) بکار می رود. همچنین CSS هم یکی دیگر از زبان های برنامه نویسی است که در چیدمان صفحات وب بسیار بکار می آید.

نکته شماره چهار: صفحه اصلی

صفحه اصلی، کلید اساسی جستجوی سایت شما در موتورهای جستجو می باشد چرا که می بایست کل سایت شما را خلاصه نموده و به کاربر دلیلی قانع کننده برای استفاده از وب سایت ارائه کند.

نکته شماره پنج: لینک ها

websearch link building 300x300 بهینه سازی برای موتور جستجو(SEO)

موتورهای جستجو به لینک های موجود در سایت شما و کلمات موجود در این لینک ها توجه بسیاری می کنند. بهتر است برای لینک کردن به یک مطلب از اصطلاحات “اینجا را کلیک نمایید” و یا “بیشتر بخوانید” استفاده نکنید. متن لینک باید مشخص کند که کاربر را به چه مطلبی هدایت می کند، بعنوان مثال”نمونه هایی از طراحی سایت CSS” و یا “آموزش ارتقای SEO”. هرچه لینک ها ارتباط بیشتری با محتوای صفحه داشته باشند، قابلیت جستجوی بیشتری خواهند داشت. چنانچه می خواهید از سبک ساده گرایی در طراحی سایت خود استفاده کنید، لینک به صفحه Design MeltDown در مینیمالیسم، بهینه سازی برای موتور جستجوی شما ارتقا می دهد.

نکته شش: استفاده از تگ عنوان 

هر صفحه ای باید یک عنوان با نام سایت و توضیحی مختصر درمورد آن صفحه داشته باشد. این عنوان مجموعاً می تواند از ۶۰ حرف و یک کلمه کلیدی تشکیل شده باشد. به یاد داشته باشید که عنوان صفحه همان چیزی است که در نتایج جستجو نشان داده می شود، پس بهتر است دلیلی واضح و روشن برای کلیک کردن به کاربر بدهد.

Navigation links باید عنوانی متناسب با عناوین صفحات وب داشته باشد. تگ آن می تواند اینگونه باشد: <a title=”name of page” href=”link”>. اگرچه این مطلب در ظاهر ساده است ولی کمک بزرگی در ارتقای SEO به شما می کند.

نکته هفت: تگ های Alternative

هر تصویری در سایت باید تگ Alternative داشته باشد بخصوص تصاویری که مرتبط با صفحه هستند. اگر محتوای صفحه درباره CSS می باشد می توان تصویر مربوط به آن را به عبارت “نمونه های از CSS” تگ کرد که در این صورت قابلیت جستجوی صفحه افزایش می یابد. انتخاب عنوان نامرتبط با هر تصویر هم می تواند تاثیر عکس بگذارد.

نکته هشت: چشم پوشی از تگ های Meta

سال های گذشته تگ های Meta جز اصلی SEO بود ولی در حال حاضر اینگونه نیست. تنها تگ Meta که حائز اهمیت است تگ توضیحات یا description tag است. موتورهای جستجو از description tag بعنوان متنی زیر لینک مربوط به صفحه سایت در نتایج یافته شده استفاده می کنند. بهتر است در انتخاب description tag دقت لازم را داشته باشید چرا که این متن به کاربر کمک می کند تا از سایت شما بازدید کند یا نه.

نکته نه: نقشه سایت

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

نکته ده: طراحی برای انسان 

موتورهای جستجو برای یافتن آنچه انسان ها می خواهند، طراحی می شوند. این بدان معناست که چنانچه می خواهید سایت شما نیز جستجو شود بهتر است درنظر داشته باشید که کاربران شما انسان ها هستند. کار شما بعنوان یک طراح این است که مشکلات را حل کنید نه اینکه مرزها را شکسته و طراحی های هنری عجیبی از خود ارائه دهید. در این شرایط، باید برای کاربران خود سایتی طراحی کنید که به آسانی قابل استفاده باشد. طراحی سایت با همچین دیدگاهی به موتورهای جستجو کمک می کند تا شما را به کاربران معرفی نمایند.

 منبع: justcreative.com

]]> http://tarahan.com/%d8%a8%d9%87%db%8c%d9%86%d9%87-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d9%85%d9%88%d8%aa%d9%88%d8%b1-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88/feed/ 0 ساده گرایی (مینیمالیسم) http://tarahan.com/%d8%b3%d8%a7%d8%af%d9%87-%da%af%d8%b1%d8%a7%db%8c%db%8c-%d9%85%db%8c%d9%86%db%8c%d9%85%d8%a7%d9%84%db%8c%d8%b3%d9%85/ http://tarahan.com/%d8%b3%d8%a7%d8%af%d9%87-%da%af%d8%b1%d8%a7%db%8c%db%8c-%d9%85%db%8c%d9%86%db%8c%d9%85%d8%a7%d9%84%db%8c%d8%b3%d9%85/#respond Sun, 10 Jan 2016 07:34:34 +0000 http://tarahan.com/?p=5108 […]]]> در گذشته، مبحث ساده گرایی یا مینیمالیسم بسیار پرکاربرد بود و امروزه به نظر می رسد که بعنوان جایگزینی برای طراحی های شلوغ وب سایت ها، پوسترها، تبلیغات و لوگوها، دوباره به دنیای طراحی بازگشته است.

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

رنگ

minimalism colors ساده گرایی (مینیمالیسم)

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

صفحه آرایی

ساده گرایی در مقوله صفحه آرایی بسیار چالش برانگیز است زیرا تمامی عناصری که در این زمینه بکار گرفته می شوند، حائز اهمیت هستند. محتوای هر وب سایت یا پوستر باید بگونه ای قرار داده شود که خواننده بدون تفکر و گذران وقت چندانی،به آنچه می خواهد دست یابد. به عبارت دیگر، هر صفحه ای باید بدرستی و در عین سادگی محتوای خود را القا نماید.

فضای سفید

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

گرافیک 

استفاده از تصاویر در مینیمال سازی نقش مهمی بازی می کند. طراحان برای سادگی و تاثیر بیشتر خلاقیتشان از تصاویر استفاده می کنند تا بدین ترتیب در فضایی عاری از شلوغی، بهتر و بیشتر منظور خود را برسانند. در این مقوله، بهتر است گرافیک ها و تصاویری بکار گرفته شوند که کاملاً مربوط به موضوع طراحی می باشند.

تایپوگرافی

minimalism typography 253x300 ساده گرایی (مینیمالیسم)

تایپوگرافی در زمینه ساده گرایی باید همانند سایر المان ها مهم تلقی شود. در هر طراحی که بر مبنای مینیمالیسم صورت می گیرد جایز نیست که بیش از دو یا سه فونت استفاده شود. معمولاً بکار گرفتن بیش از سه فونت منجر به پیچیدگی غیر ضروری طرح شده و فهم آن را برای کاربران مشکل می سازد.

ساده گرایی در سایت

طی ۱۰ سال گذشته، طراحی مینیمالیسم وب سایت ها بسیار رواج یافته است. متاسفانه، برخی از طراحان مفهوم اصلی ساده گرایی را بخوبی درک نکرده و صفحاتی را طراحی می کنند که بی معنا بوده و کاربردی ندارند. با این وجود، طراحی های ماهرانه ای هم وجود دارند که نه تنها مشوق کاربران در مراجعه به سایت بوده بلکه به آسانی قابل مطالعه هستند. اگرچه، این سبک طراحی برای تمامی وب سایت ها کاربرد ندارد ولی چنانچه می توانید از ساده گرایی برای طراحی سایت خود بهره مند شوید، بهتر است از انجام آن ممانعت نکنید.

ساده گرایی در رسانه ها

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

ساده گرایی در طراحی لوگو

در طراحی لوگوها یکی از مسائل حائز اهمیت ساده گرایی است چراکه هدف اصلی یک لوگو ماندگاری در اذهان و ارتباط مستقیم آن با زمینه فعالیت شرکت است. درنتیجه، لوگوهایی که با سبک ساده گرایی طراحی می شوند غالباً از اعتبار بالایی برخوردار می شوند چرا که سادگی لازم برای ماندن در اذهان را دارند. بخش چالشی یک لوگوی مینیمال این است که به آسانی، شرکت مذبور و اهداف آن را معرفی می کند.

منبع: justcreative.com

]]> http://tarahan.com/%d8%b3%d8%a7%d8%af%d9%87-%da%af%d8%b1%d8%a7%db%8c%db%8c-%d9%85%db%8c%d9%86%db%8c%d9%85%d8%a7%d9%84%db%8c%d8%b3%d9%85/feed/ 0 تایپوگرافی در سال ۲۰۱۶ http://tarahan.com/%d8%aa%d8%a7%db%8c%d9%be%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c-%d8%af%d8%b1-%d8%b3%d8%a7%d9%84-2016/ http://tarahan.com/%d8%aa%d8%a7%db%8c%d9%be%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c-%d8%af%d8%b1-%d8%b3%d8%a7%d9%84-2016/#respond Wed, 06 Jan 2016 09:19:19 +0000 http://tarahan.com/?p=5079 […]]]> تایپوگرافی آمیزه ای از هنر، علم، کسب و کار و فناوری است. سال ۲۰۱۵ با پیشرفت های جالب و شگفت انگیزی در این زمینه مواجه بوده است. باید دید سال ۲۰۱۶ منتظر چه تغییراتی است؟ در این مقاله، ۳ نکته جالب توجه در مورد تایپوگرافی را بررسی می کنیم که می توانند منعکس کننده سبک های نوین سال ۲۰۱۶ باشند.

۱) آیا سال جدید با بازگشت تایپوگرافی Serif همراه است؟

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

serif تایپوگرافی در سال 2016

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

۲) تایپ دیجیتال

در دنیای امروز، تایپ دیجیتال همه جا وجود دارد؛ موبایل های هوشمند، تلویزیون، سایر وسایل و همانطور که به نظر می رسد این مبحث از اهمیت بالایی برخوردار است. در حال حاضر، یکی از طراحی های معروف در زمینه فونت San Francisco typeface است که اولین بار برای Apple Watch طراحی شد و متعاقباً برای سیستم عامل های iOS و OS El Capitan نیز بکار گرفته شده است. تغییر زمینه تایپوگرافی یکی از شناخته شده ترین و معروف ترین برندها دنیا توجه همگان را عمیقاً به خود جلب کرد. نمونه های دیگر از این قبیل که دنیای تایپوگرافی را با تحول جدیدی رو به رو ساختند، تغییر تایپوگرافی کتابخوان Amazon Kindle و لوگوی Google در سپتامبر سال ۲۰۱۵ می- باشد.

Bookerly KindlePaperwhite 791x1079 تایپوگرافی در سال 2016

 اگرچه این تغییرات با مخالفت های بسیاری از جانب رسانه ها مواجه شدند اما برای برخی دیگر، ایده های جالبی بوده و باید انتظار داشت که در سال میلادی جدید، بیش از گذشته با این تایپوگرافی ها برخورد کنیم.

۳) نرم افزارهای طراحی تایپوگرافی

 طراحی تایپوگرافی تجارتی است که نیازمند مهارت ها و توانایی های ویژه ای است اما علاوه بر داشتن استعداد، بهره مندی از نرم افزارهای کارآمد می تواند کمک بزرگی در این زمینه کند. در ادامه، به معرفی ابزارهایی می پردازیم که در زمینه طراحی تایپوگرافی نقش عمده ای بازی می کنند. Prototype ،Adobe’s Project Faces و FontArk نرم افزارهایی هستند که کمک می کنند تا بتوان ساختار اصلی فونت مورد نظر خود را تغییر داده و آن را شخصی سازی کرد. با استفاده از این نرم افزارها به آسانی می توان ویژگی های مربوط به تایپوگرافی های متعدد را ترکیب کرده و فونتی را طراحی کرد که اختصاصی و منحصر بفرد می باشد.

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

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%aa%d8%a7%db%8c%d9%be%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c-%d8%af%d8%b1-%d8%b3%d8%a7%d9%84-2016/feed/ 0 ۱۰ طرح اینفوگرافیک برتر سال ۲۰۱۵ http://tarahan.com/%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%b3%d8%a7%d9%84-2015/ http://tarahan.com/%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%b3%d8%a7%d9%84-2015/#respond Tue, 05 Jan 2016 13:37:13 +0000 http://tarahan.com/?p=5003 […]]]> با گذشت زمان، تعداد طرفداران طرح های اینفوگرافیک افزایش می یابد. در سال میلادی گذشته طرح های بیشمار و جذابی در غالب اینفوگرافیک ارائه شدند که در اینجا ۱۰ تا از بهترین طرح ها را به شما معرفی می کنیم.

۱) روان شناسی طراحی لوگو

colour infographic crop 10 طرح اینفوگرافیک برتر سال 2015

یکی از اینفوگرافیک های جالب سال ۲۰۱۵، در ارتباط با بعد روان شناسی طراحی لوگو است.

هر روزه لوگوهای متنوعی به ما معرفی می شوند ولی عوامل متعددی در تاثیرگذاری لوگو نقش دارند. این مسئله از رنگ بندی و اشکال گرفته تا اندازه ها و فواصلی که قرار داده می شوند. اینفوگرافیک بالا به بهترین نحو ممکن روان شناسی لوگوها را نشان می دهد و به عبارت دیگر، دلیل موفقیت آن ها را نیز شرح داده است (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۲) جنگ نوستالژی و پیشرفت تکنولوژی

newmedia oldvsnew lc v5 cropped1 10 طرح اینفوگرافیک برتر سال 2015

وسایل قدیمی اگرچه امروزه کاربرد زیادی ندارند ولی یادآور خاطرات زیبایی هستند و همچنان در کنار وسایل پیشرفته امروزی محبوبیت خود را حفظ کرده اند. اینفوگرافیک بالا مبین همین مطلب است و به نوعی به مقایسه ابزار قدیمی و پیشرفته می پردازد (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۳) بازی رنگ ها در طراحی وب سایت 

Color Coordination crop 10 طرح اینفوگرافیک برتر سال 2015

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

۴) ۴۰ روش داشتن خلاقیت

40ways crop 10 طرح اینفوگرافیک برتر سال 2015

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

۵) مشخصات رایج طراحان معروف

stereotype crop 10 طرح اینفوگرافیک برتر سال 2015

در اینفوگرافیک بالا، سبک ها، علاقه مندی ها و بسیاری از ویژگی های جالب و مشترک میان طراحان معروف نشان داده شده است. این طرح ساده اما بسیار جالب می تواند به طرفداران مشاغل ذکر شده کمک کند تا از سبک طراح محبوب خود پیروی کنند (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۶) ۱۰ اصل مهم و اساسی در طراحی لوگو

10 Commandments of Logo Design1 10 طرح اینفوگرافیک برتر سال 2015

در یکی از مواردی که اینجا ذکر شد روان شناسی لوگوها را بررسی کردیم. اینفوگرافیک بالا، ۱۰ تا قانون اساسی در طراحی لوگو را به شما نشان می دهد و می تواند راهنمای مناسبی در طراحی هرچه بهتر لوگو باشد (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۷) بهترین وضعیت فیزیکی در محیط کار

posture 10 طرح اینفوگرافیک برتر سال 2015

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

۸) مروری بر ۳۰ سال تجربه طراحی وب سایت

Web Design History changed 10 طرح اینفوگرافیک برتر سال 2015

در اینفوگرافیک شماره ۸ مروری به ۳۰ سال تجربه طراحی وب سایت شده است. زمانی که اولین سایت HTML در سال ۱۹۹۱ شکل گرفت تا زمان حال که طراحان خبره ای در این زمینه مشغول به فعالیت هستند. در حقیقت این طرح نشان می دهد چگونه در طی این مدت اندک علم طراحی وب سایت پیشرفت کرده و در مسیر رو به جلو حرکت کرده است (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۹) ۲۶ نکته قابل توجه پیش از توسعه یک وب سایت

develop changed 10 طرح اینفوگرافیک برتر سال 2015

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

۱۰) چگونه می‌توان یک اینفوگرافیک بی‌نظیر طراحی کرد؟

The Great Big List of Infographic1 crop 10 طرح اینفوگرافیک برتر سال 2015

چناچه با دیدن لیست برترین اینفوگرافیک های سال ۲۰۱۵ مشتاق به طراحی اولین اینفوگرافیک خود شده اید طرحی را به شما معرفی می کنیم که بطور کامل نحوه طراحی اینفوگرافیک را به شما نشان می دهد.

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%b3%d8%a7%d9%84-2015/feed/ 0 اینفوگرافیک (Infographic) چیست؟ http://tarahan.com/%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-infographic-%da%86%db%8c%d8%b3%d8%aa%d8%9f/ http://tarahan.com/%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-infographic-%da%86%db%8c%d8%b3%d8%aa%d8%9f/#respond Tue, 05 Jan 2016 06:11:16 +0000 http://tarahan.com/?p=4966 […]]]> تعریف اینفوگرافیک (Infographic)

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

همانطور که از لغت اینفوگرافیک پیداست این کلمه از ترکیب لغات Information به معنی اطلاعات و graphic به معنی گرافیک دست آمده است (information+ graphic). پس می توان اینگونه نتیجه گیری کرد که اینفوگرافیک یعنی گرافیک و طرحی که در برگیرنده اطلاعات می باشد. به عبارت دیگر می توان گفت اینفوگرافیک، اطلاعات پیچیده را در غالب طرحی قابل فهم ارائه می دهد.

در قرن بیستم اینفوگرافیک های چاپی به علت گسترش روزنامه ها، از محبوبیت بسیاری برخوردار شدند بطوری که افراد متعددی در این زمینه کتاب ها، سخنرانی ها و کارگاه های آموزشی زیادی ارائه دادند. در قرن بیست و یکم، اینفوگرافیک ها بصورت دیجیتالی عرضه شدند و در سال ۲۰۱۰ بود که اینفوگرافیک ها به آنچه امروز می بینیم تبدیل شدند یعنی همان گرافیک های دیجیتالی که برای ارائه داده های پیچیده طراحی می شوند.

دلیل محبوبیت اینفوگرافیک ها چیست؟

 why infographic اینفوگرافیک (Infographic) چیست؟

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

چگونه می توانید اینفوگرافیک خود را طراحی کنید؟

infographics 1 اینفوگرافیک (Infographic) چیست؟

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

وب سایت Canva به شما این امکان را می دهد تا گرافیک هایی در اندازه های متفاوت و بطور رایگان طراحی کنید.

 Piktochart وب سایتی بسیار کارآمد با بیش از ۱۰۰ تم و ۱۰۰۰ تصویر رایگان می باشد.

Infogr.am وب سایت دیگری است که با ارائه ۳۰ تم رایگان به شما کمک می کند تا خلاقیت خود را در زمینه ساخت اینفوگرافیک اثبات کنید.

در ادامه می توانید چند مثال از اینفوگرافیک های طراحی شده را مشاهده کنید.

infographic sample 1 اینفوگرافیک (Infographic) چیست؟

همانطور که از تصویر بالا معلوم است این اینفوگرافیک در ارتباط با آسیب های مغز است. این مطلب را به راحتی و در یک نگاه می توان از تصویر مغز دریافت.

Successful Unsuccessful Infographic اینفوگرافیک (Infographic) چیست؟

در اینفوگرافیک بالا ویژگی ها و مشخصات انسان های موفق و ناموفق به نمایش گذاشته شده اند.

infographic 3 اینفوگرافیک (Infographic) چیست؟

 تصویر بالا، اینفوگرافیک آموزنده ای در مورد ابتلای کودکان به بیماری چاقی است.

منبع: www.webpagefx.com

]]> http://tarahan.com/%d8%a7%db%8c%d9%86%d9%81%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c%da%a9-infographic-%da%86%db%8c%d8%b3%d8%aa%d8%9f/feed/ 0 بهترین طراحی های لوگو در سال ۲۰۱۵ http://tarahan.com/%d8%a8%d9%87%d8%aa%d8%b1%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%87%d8%a7%db%8c-%d9%84%d9%88%da%af%d9%88-%d8%b3%d8%a7%d9%84-2015/ http://tarahan.com/%d8%a8%d9%87%d8%aa%d8%b1%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%87%d8%a7%db%8c-%d9%84%d9%88%da%af%d9%88-%d8%b3%d8%a7%d9%84-2015/#respond Mon, 04 Jan 2016 09:52:26 +0000 http://tarahan.com/?p=4941 […]]]> مروری بر طراحی جدید لوگو ها در سال ۲۰۱۵

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

در این قسمت، می خواهیم نگاهی به بهترین طراحی های جدید و تغییرات صورت گرفته بر لوگوها بیندازیم.

۱) Amaze

amaze logo بهترین طراحی های لوگو در سال 2015

یکی از جالب ترین لوگوهای سال ۲۰۱۵ مربوط به شرکت Amaze می باشد. این طرح متشکل از ۱۰۰۰۰ چندوجهی است که نسبت به حرکات و صدای کاربر واکنش نشان می- دهد. به عبارت دیگر، این لوگوی شگفت انگیز ترکیبی از فناوری و رفتار انسانی است.

۲) DKNY

dkny new logo بهترین طراحی های لوگو در سال 2015

DKNY که یکی از معتبرترین برندهای صنعت پوشاک است در سپتامبر سال ۲۰۱۵ لوگوی جدید خود را از طریق شبکه اجتماعی اینستاگرام رونمایی کرد. برای سال جدید، این شرکت تصمیم دارد تا طراحی برای خانم ها را جایگزین طراحی برای دختران جوان کند و این تغییر مسیر را از طریق فونت لوگوی خود نشان داده است.

۳) Google

OGB INSIDER BLOGS GoogleLogox2 Animated بهترین طراحی های لوگو در سال 2015

جای هیچ تعجبی ندارد که تغییر لوگوی پر بازدید کننده ترین سایت دنیا یعنی Google به یکی از شگفت انگیزترین اخبار دنیای تکنولوژی در سال ۲۰۱۵ مبدل می شود. این شرکت بنام پس از گذشت ۱۶ سال، لوگوی جدید خود را با تغییر فونت و شارپ شدن رنگ ها معرفی کرده است.

۴) Verizon

vz new بهترین طراحی های لوگو در سال 2015

همزمان با تغییر لوگوی Google، بزرگ ترین شرکت مخابراتی آمریکا یعنی Verizon، نیز لوگوی جدید خود را معرفی کرد. اگرچه سادگی لوگوی Google بسیار تحسین برانگیز بود ولی این امر در مورد شرکت مذکور صدق نکرد. البته شایان ذکر است که سیاست شرکت Verizon،  بر راحتی و دسترسی آسان است که لوگوی جدید به نوعی نمادی از همین مطلب است.

۵) Facebook

fb new بهترین طراحی های لوگو در سال 2015

در سال میلادی گذشته یکی دیگر از شرکت های پرآوازه ای که لوگوی خود را تغییر داد، Facebook بود. برای طرفداران پرو پاقرص این شبکه اجتماعی، تغییرات جزئی لوگو بسیار مشهود بود. این اولین باری بود که در تاریخ ظهور Facebook فونت لوگو تغییر داده می شد. اگرچه فرمت نوشتاری حروفی مانند “a” و “b” عوض شده است ولی همچنان حرف شاخص “f” با فرمت قبلی باقی مانده است.

 ۶) Dailymotion

dailymotion logo بهترین طراحی های لوگو در سال 2015

سایت Dailymotion که بزرگ ترین و پربازدید کننده ترین سایت در زمینه ارسال ویدیو است در ماه مارچ ۲۰۱۵ تغییری اساسی در لوگوی خود ایجاد کرده و با نماد قدیمی خود که تنها نام شرکت را در برمی گرفت، خداحافظ کرد.

۷) Electrolux

electrolux1 بهترین طراحی های لوگو در سال 2015

برند Electrolux یکی از پیشتازان صنعت لوازم خانگی از سال ۱۹۰۹ است که در ژانویه سال ۲۰۱۵ دست به تغییراتی در لوگوی خود زد. در این راستا، فونت استفاده شده در لوگو بطور کاملا اختصاصی برای این شرکت طراحی شده است که این نشان دهنده منحصربفرد بودن برند مذکور می باشد.

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%a8%d9%87%d8%aa%d8%b1%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%87%d8%a7%db%8c-%d9%84%d9%88%da%af%d9%88-%d8%b3%d8%a7%d9%84-2015/feed/ 0 ۵ روش برتر در زمینه User Experience) UX Design) http://tarahan.com/5-%d8%b1%d9%88%d8%b4-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%af%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87-ux-design/ http://tarahan.com/5-%d8%b1%d9%88%d8%b4-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%af%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87-ux-design/#respond Sun, 03 Jan 2016 15:08:40 +0000 http://tarahan.com/?p=4897 […]]]> یکی از مباحث مهم در زمینه طراحی وب سایت، User Experience Design) UX Design یا طراحی تجربه کاربر) می باشد. این روند مربوط به افزایش رضایت مشتری (کاربر) از طریق بالا بردن کیفیت طراحی وب سایت است بطوری که می توان گفت در سال های اخیر هدف نهایی طراحان، کسب رضایت کاربران است.

در این بخش، به بررسی ۵ روش UX Design می پردازیم که می توانند بر نظر کاربران تاثیر مثبت بگذارند و هر طراح باید برای رقابتی بودن سایت خود به این نکات توجه کند.

۱) طراحی خدماتی سایت (Web Service Design)

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

دلایل کارایی بالای این طراحی عبارتند از:

غالب های متعدد – در UX Design می توان از وردپرس، غالب های با کیفیت بالا، فریم ورک های (Framework) رایج و طراحی های زیادی استفاده کرد.

الگوهای User Interface) UI) مطمئن – نکته اصلی در الگوهای UI، سادگی کاربرد آن هاست. از آنجایی که الگوهای UI از اطمینان بالایی برخوردار هستند درنتیجه فضای بیشتری برای استفاده از UX Design وجود دارد.

در سال های اخیر که وسایل قابل حمل جایگزین دسکتاپ و مانیتورها شده اند، اکثر طراحان توجه اساسی به طراحی ریسپانسیو (Responsive Design) دارند و این بدان معناست چنانچه در نظر دارید وب سایت شما از طراحی ریسپانسیو برخوردار باشد، باید اطلاعات کافی از UX Desgin داشته باشید.

بهترین راهکارها در این زمینه عبارتند از:

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

 ۲) Personalisation (شخصی سازی)

personalisation the key to engaging with your multichannel consumer 1 638 5 روش برتر در زمینه User Experience) UX Design)

یکی دیگر از تکنیک های طراحی UX Design، شخصی سازی یا Personalisation است. هر فردی مایل است احساس خاص بودن داشته باشد. در مبحث Personalisation، ارائه خدمات مطلوب کاربران مدنظر است بدون اینکه آن ها در این زمینه درخواستی کرده باشند. شخصی سازی مفهومی بسیار گسترده دارد که یکی از مثال های رایج آن می تواند یادآوری هر رخداد مهمی از قبیل تولد باشد.

بهترین راهکارها در این زمینه عبارتند از:

  • شناخت کاربر – اولین و مهم ترین قدم، شناخت کاربران است که این فرآیند می تواند توسط ارائه پرسشنامه و یا انجام مطالعات انجام شود. با شناخت کاربران می- توان سایتی متناسب با علاقه آن ها طراحی کرد.
  •  طرح سوالات – زمانی که احتیاج به دریافت اطلاعاتی از کاربر دارید بهتر است آن را در جای مناسب مطرح کنید چرا که طرح یک سوال در موقعیت نامناسب مانند فرم ثبت نام می تواند یک امتیاز منفی در ذهن کاربر ایجاد کند.
  • مستندسازی تجربیات کاربران – استفاده از اطلاعات و سناریوی اشخاص، یکی از ابزارهای کارآمد در شخصی سازی است. طبقه بندی اطلاعات کسب شده خود می- تواند نقش موثری در طراحی هرچه بهتر وب سایت داشته باشد. برای کسب اطلاعات مفید در این زمینه می توانید به سایت alistapart.com  مراجعه نمایید.

 ۳) تعاملات Microinteractions) Micro)

با رقابتی تر شدن یک صنعت، توجه به جزئیات در طراحی UX Design مربوطه از اهمیت زیادی برخوردار است. Microinteractionها طراحی های جزئی هستند که می توانند تاثیر مثبتی بر تجربه کاربر داشته باشند. بعنوان یکی از نمونه های بسیار کارآمد و رایج، می توان به صدای دریافت پیغام در زمان چت اشاره کرد. از نقطه نظر کاربران امروزه سایت هایی که فاقد Microinteractionها می باشند، خسته کننده به نظر می رسند.

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

  • زمان اجرای Microinteractionها نباید طولانی باشد و باید در ۰.۱ ثانیه توجه کاربر را جلب کند. همانطور که همیشه در طراحی وب سایت ها ذکر می شوند هیچ فعالیتی در سایت نباید کاربر را بیش از اندازه منتظر بگذارد.
  • بهتر است که تمامی جزئیات وجه تشابهی با هم داشته باشند چرا که این امر می تواند هویت برند موردنظر را ارتقا دهد. بعنوان مثال،سایت معروف Yahoo در تمامی بخش ها از خط و فونت آبی رنگ استفاده شده است و این خود بعنوان مشخصه سایت در نظر گرفته می شود.
  • یکی از نکات مهم در این زمینه عدم تکرار بیش از حد یک Microinteraction می باشد چرا که می تواند بعد از مدت زمان طولانی برای کاربر اذیت کننده باشد.

۴) طراحی برای وسایل متنوع

امروزه با وجود ابزار متفاوت برای جستجو در اینترنت مانند تبلت، تلفن همراه و لپ تاپ کاربران تمایل دارند بوسیله تمامی این وسایل از کلیه سایت ها بهره مند شوند. درنظر گرفتن این امر نقشی اساسی در زمینه UX Design دارد.در چنین شرایطی دو راه حل پیش پای طراحان وجود دارد: Responsive Design (طراحی واکنش گرا) و یا Adaptive Design (طراحی انطباقی). تفاوت در این است که صفحه آرایی Responsive با هر وسیله ای تناسب دارد در حالی که در طراحی Adaptive برای هر وسیله ای صفحه آرایی ویژه ای وجود دارد. اما آنچه که امروزه بیشتر مد نظر و رایج است طراحی Responsive است.

بهترین راهکارها در این زمینه عبارتند از:

  • یکی از اصول مهم،ثابت بودن آیکون ها و رنگ ها در وسایل متنوع است. علاوه بر این مکان قرار گرفتن آیتم ها نیز بسیار حائز اهمیت است.
  • اندازه تصاویر باید به نحوی باشد که بدرستی در هر وسیله ای نمایش داده شوند.
  • مسلما هر وسیله ای امتیازات و نقاط ضعفی دارد. باید تمامی این نکات در زمان طراحی وب سایت در نظر گرفته شود و بهترین تصمیم در مورد عملکرد باید اتخاذ شود.

۵) Gamification

Gamification 5 روش برتر در زمینه User Experience) UX Design)

Gamification (بازی آفرینی) فرآیند استفاده از عناصر بازی گونه در زمینه هایی غیر از بازی و سرگرمی می باشد. به عبارت دیگر، Gamification بکار بردن المان هایی برای جذب کاربران می باشد اما نکته قابل توجه عدم استفاده بیش از حد از آن است.

در این زمینه بهتر است به نکات زیر توجه کنید:

  • استفاده از Gamification باید بگونه ای باشد که به کاربر حس خوبی را القا کند یعنی میزان پیچیدگی المان ها باید متناسب با سطح کاربران باشد.
  • چنانچه استفاده از سایت شما همراه با پیشرفت در فعالیت خاصی می باشد، بهتر است به کمک المان های بازی گونه، کاربران را از میزان پیشرفت کار، آگاه سازید.

در این بخش تلاش بر این بود که تکنیک های مهمی در مبحث UX Design را آموزش دهیم. اگر مایل به مطالعه بیشتر در این زمینه هستید می توانید از لینک زیر کتاب الکترونیکی UX Design Trends 2015 & 2016 را دانلود نمایید:

دانلود کتاب

منبع: www.awwwards.com

 

]]> http://tarahan.com/5-%d8%b1%d9%88%d8%b4-%d8%a8%d8%b1%d8%aa%d8%b1-%d8%af%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87-ux-design/feed/ 0 طراحی صفحات وب سایت http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/#respond Sat, 02 Jan 2016 09:42:22 +0000 http://tarahan.com/?p=4872 […]]]> آیا همواره بدنبال منبعی جالب و کامل برای طراحی صفحات وب سایت هستید؟

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

اغلب کتاب هایی که با موضوع طراحی وب سایت نوشته شده و به فروش می رسند بیشتر به جوانب پیشرفت در کار طراحی از قبیل HTML، CSS، JavaScript و غیره تمرکز می کنند در حالی که توجه اصلی کتاب مذکور تنها بر روش های لازم برای طراحی صفحات وب سایت است.

این کتاب، Design for a Perfect Screen نام دارد که توسط وب سایت نام آشنای Webydo به صورت کتاب الکترونیکی در دسترس همگان قرار گرفته است.

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

design perfect screen awwwards 3 طراحی صفحات وب سایت

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

برای دستیابی به این کتاب ارزشمند، شما می توانید از لینک زیر استفاده کنید:

دانلود کتاب

منبع: www.awwwards.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 طراحی ریسپانسیو (واکنش گرا) http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%d9%88%d8%a7%da%a9%d9%86%d8%b4-%da%af%d8%b1%d8%a7/ http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%d9%88%d8%a7%da%a9%d9%86%d8%b4-%da%af%d8%b1%d8%a7/#respond Sat, 02 Jan 2016 07:09:20 +0000 http://tarahan.com/?p=4859 […]]]> دلیل اهمیت  طراحی ریسپانسیو (Responsive Design) چیست؟

responsive 1 طراحی ریسپانسیو (واکنش گرا)

امروزه به علت وجود وسایل متنوع برای جستجو در اینترنت از قبیل تبلت و تلفن همراه، وب سایت ها باید بگونه ای طراحی شوند که بوسیله این گجت ها هم امکان مراجعه به آن ها وجود داشته باشد. درنتیجه تمامی وب سایت ها باید از طراحی ریسپانسیو (Responsive Design) برخوردار باشند. ریسپانسیو خود به معنای واکنشی یا پاسخ گرا می باشد و طراحی ریسپانسیو در دنیای طراحی وب سایت یعنی اینکه بتوان در وسایل دیجیتال متفاوت مانند مانیتور، تبلت و تفلن همراه از سایت به درستی بهره مند شد.

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

کتاب Responsive Web Design Best Practices مطالب جالب و مفیدی در همین زمینه ارائه می دهد. این کتاب ۱۲۹ صفحه ای که توسط سایت UXPin در اختیار همگان قرار گرفته است، شامل:

۱) تجربه  ۲۰ ساله و یا حتی بیشتر طراحانی است که در مورد طراحی ریسپانسیو فعالیت کرده اند.

۲) مطالعه جامع تکنیک های ریسپانسیو یا واکنش گرای بکار گرفته شده توسط شرکت های معروفی چون Uber، Palantir، Virgin America، MailChimp، Smashing Magazine می باشند.

۳) مطالب مفیدی درمورد صفحه آرایی ریسپانسیو، الگوهای UI، تایپوگرافی، تصاویر ریسپانسیو و اجرای فنی این طراحی می شود.

۴) آموزش های گام به گام و دقیق طراحی ریسپانسیو یا واکنش گرا می باشد.

برای دانلود این کتاب ارزشمند که همواره می تواند بعنوان منبعی کارآمد در کنار شما باشد، روی لینک زیر کلیک نمایید:

دانلود کتاب

منبع: www.awwwards.com

]]> http://tarahan.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%d9%88%d8%a7%da%a9%d9%86%d8%b4-%da%af%d8%b1%d8%a7/feed/ 0 ۶ سبک جدید طراحی سایت در سال ۲۰۱۶ (بخش دوم) http://tarahan.com/%d8%b3%d8%a8%da%a9-%d8%ac%d8%af%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%d9%84-2016-%d8%a8%d8%ae%d8%b4-%d8%af%d9%88%d9%85/ http://tarahan.com/%d8%b3%d8%a8%da%a9-%d8%ac%d8%af%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%d9%84-2016-%d8%a8%d8%ae%d8%b4-%d8%af%d9%88%d9%85/#respond Sat, 02 Jan 2016 06:19:44 +0000 http://tarahan.com/?p=4841 […]]]> برای طراحی سایت خود چه سبک هایی را باید مدنظر قرار دهیم؟

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

۴) استفاده از صفحه بارگذاری (Load Screen) سرگرم کننده

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

load screen 1 6 سبک جدید طراحی سایت در سال 2016 (بخش دوم)

همانطور که در تصویر بالا مشاهده می کنید درصد بارگذاری سایت تنها چیزی است که در صفحه اصلی دیده می شود و این امتیازی منفی در طراحی سایت به شمار می رود.

load screen 2 6 سبک جدید طراحی سایت در سال 2016 (بخش دوم)

درحالی که در مثال بالا، صفحه بارگذاری متشکل از گرافیک های بسیار زیبایی است که در حین بارگذاری صفحه، کاربر را بسیار سرگرم کرده و باعث ترغیب وی برای استفاده و مراجعه مجدد به سایت می شوند.

۵) جاوا اسکریپت (JavaScript)

امروزه استفاده از زبان برنامه نویسی جاوا اسکریپت بعنوان سبک جدید طراحی سایت بسیار پر رونق است چراکه به کمک آن می توان صفحه های بارگذاری زیبا و یا

آیتم های جالبی از قبیل اسلایدرها را خلق کرد ولی پیشنهاد ما به شما این است که بیش از حد معمول از جاوا اسکریپت استفاده نکنید زیرا:

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

۶) تایپوگرافی (Typography)

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

typography 6 سبک جدید طراحی سایت در سال 2016 (بخش دوم)

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

در زمان انتخاب فونت، نکات زیر را حتماً مدنظر قرار دهید:

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

در این بخش، نکاتی در زمینه ۶ سبک جدید طراحی سایت را به شما یادآوری کردیم. در کنار تمام مطالبی که گفته شد، آنچه حائز اهمیت است نیاز کاربران می باشد که شما باید در نظر بگیرید. در مسیر طراحی یک وب سایت نباید به تنهایی از  سبک های رایج پیروی کرد بلکه در زمان انتخاب، باید تمامی جوانب را مدنظر قرار داد.

بعنوان حسن ختام این بخش آموزشی، لینکی را برای شما قرار داده شده است که توسط آن می توانید کتابی تحت عنوان سبک های طراحی وب سایت سال های ۲۰۱۵ و ۲۰۱۶ در ارتباط با طراحی بسیاری از وب سایت های بنام از قبیل Google، Adidas، Reebok، Dropbox و سایر وب سایت های شناخته شده، دانلود نمایید.

 منبع: www.awwwards.com

]]> http://tarahan.com/%d8%b3%d8%a8%da%a9-%d8%ac%d8%af%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d8%a7%d9%84-2016-%d8%a8%d8%ae%d8%b4-%d8%af%d9%88%d9%85/feed/ 0 ۶ سبک جدید طراحی سایت در سال ۲۰۱۶ (بخش اول) http://tarahan.com/6-%d8%b3%d8%a8%da%a9-%d8%ac%d8%af%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%b1-%d8%b3%d8%a7%d9%84-2016-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/ http://tarahan.com/6-%d8%b3%d8%a8%da%a9-%d8%ac%d8%af%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%b1-%d8%b3%d8%a7%d9%84-2016-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/#respond Wed, 30 Dec 2015 11:09:10 +0000 http://tarahan.com/?p=4798 […]]]> برای طراحی سایت خود چه سبک هایی را باید مدنظر قرار دهیم؟

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

۱) استفاده از منوی همبرگر برای ایجاد سبک جدید طراحی سایت

امروزه از آنجایی که گجت های قابل حمل بسیار رایج شده اند، طراحان وب سایت ها، منو (Navigation Menu) را خلاصه کرده و تحت یک منو به نام منوی موبایلی/همبرگری (Hamburger Menu) قرار می دهند. مثالی از این منو را می توانید در وب سایت Squarespace ببینید.

 Style 2 6 سبک جدید طراحی سایت در سال 2016 (بخش اول) Style 6 سبک جدید طراحی سایت در سال 2016 (بخش اول)

همانطور که در شکل های بالا دیده می شود قرار دادن منوی همبرگر بعنوان یک سبک جدید طراحی سایت منجر می شود که سایت ساده (مینیمال) و قشنگ به نظر برسد و اغلب مردم با نحوه استفاده از آن آشنایی دارند.

ولی این روش برای هر وب سایتی مانند فروشگاه های اینترنتی و سایت های خبری بکار نمی آید چرا که پیدا کردن عناوین مورد نظر در یک منو کار راحتی برای کاربران نمی باشد.

2سبک 6 سبک جدید طراحی سایت در سال 2016 (بخش اول)

همانطور که در تصویر بالا می بینید، وب سایت Time تعداد متنوعی از عناوین خبری را تحت یک منو قرار داده است ولی جهت راحتی کاربران، یک منو مربوط به آخرین اخبار و ابزاری برای جستجوی عناوین نیز در سایت قرار داده شده است.

۲) استفاده از اسلاید چرخشی (Carousel) در صفحه اول سبک جدید طراحی سایت

این روزها، اسلایدهای چرخشی در اغلب وب سایت ها دیده می شوند. اگرچه این گونه افکت ها توجه بسیاری از کاربران را جلب می کنند ولی باید نکاتی را در این مورد مدنظر قرار داد.

  • اسلایدهای چرخشی در بهینه سازی موتور جستجو (SEO) مناسب نیستند.

از آنجایی که با وجود این اسلایدها، حجم متن موجود در سایت کاهش می یابد درنتیجه یافتن meta information  کار مشکلی خواهد بود.

  •  تاثیر عکس بر عملکرد سایت می گذارند.

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

  • وجود اسلایدها، محتوای متنی سایت را در قسمت پایین صفحه قرار می دهد.

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

۳) استفاده از طراحی اسکرول پارالاکس سبک جدید طراحی سایت

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

  •  طراحی اسکرول پارالاکس برای SEO مناسب نیست.

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

می گیرد.

  • عملکرد سایت کاهش می یابد.

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

  • تاثیر منفی پارالاکس بر کاربران

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

منبع: www.awwwards.com

]]> http://tarahan.com/6-%d8%b3%d8%a8%da%a9-%d8%ac%d8%af%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%b1-%d8%b3%d8%a7%d9%84-2016-%d8%a8%d8%ae%d8%b4-%d8%a7%d9%88%d9%84/feed/ 0 تاثیر فونت برکاربران وب سایت ها http://tarahan.com/%d8%aa%d8%a7%d8%ab%db%8c%d8%b1-%d9%81%d9%88%d9%86%d8%aa-%d8%a8%d8%b1%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%a7%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%87%d8%a7/ http://tarahan.com/%d8%aa%d8%a7%d8%ab%db%8c%d8%b1-%d9%81%d9%88%d9%86%d8%aa-%d8%a8%d8%b1%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%a7%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%87%d8%a7/#respond Mon, 28 Dec 2015 12:30:52 +0000 http://tarahan.com/?p=4790 […]]]> چرا انتخاب فونت مناسب برای طراحی وب سایت حائز اهمیت است؟

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

font 21 تاثیر فونت برکاربران وب سایت ها

“عناوین و متن اصلی، عواملی هستند که توجه کاربران را بسیار جلب کرده و به عبارت دیگر، افراد را مجاب به بازدید و مطالعه وب سایت مذبور می کنند.”

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

در زمان انتخاب فونت چه عواملی را باید مد نظر قرار داد؟

متن های شما چه پیغامی را به خواننده می رساند؟

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

آیا فونت مورد نظر شما براحتی قابل دسترس است؟

برخی از فونت ها رایگان هستند و برخی دیگر باید به مبلغ گزافی خریداری شوند. باید در نظر بگیرید که آیا فونت مورد نظر مناسب بودجه شما می باشد. این عامل خود می تواند نوع فونت انتخابی شما را محدود نماید.

منبع: www.webdesignermag.co.uk

]]> http://tarahan.com/%d8%aa%d8%a7%d8%ab%db%8c%d8%b1-%d9%81%d9%88%d9%86%d8%aa-%d8%a8%d8%b1%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%d8%a7%d9%86-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%87%d8%a7/feed/ 0 ترکیب رنگ در طراحی وب سایت http://tarahan.com/%d8%aa%d8%b1%da%a9%db%8c%d8%a8-%d8%b1%d9%86%da%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%aa%d8%b1%da%a9%db%8c%d8%a8-%d8%b1%d9%86%da%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/#respond Mon, 28 Dec 2015 07:12:55 +0000 http://tarahan.com/?p=4772 […]]]> اهمیت ترکیب رنگ در طراحی وب سایت ها

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

ترکیب رنگی سایت2 ترکیب رنگ در طراحی وب سایت

در کنار وب سایت آشنا و معروف از جمله Adobe Kuler  می توان به برخی از وب سایت های که در این زمینه فعالیت دارند اشاره کرد. بعنوان مثال، وب سایت ColorLovers.com یکی از قوی ترین شبکه های اجتماعی است که در زمینه معرفی ترکیب های رنگی فعالیت می کند که اعضای آن، الگوهای متنوع و ترکیب های مختلف رنگی را طراحی نموده اند که شما به راحتی می توانید از آن ها استفاده نمایید. علاوه بر آن، وب سایت ColorSchemeDesigner.com هم یکی دیگر از ابزارهایی است که می توانید از آن بهره مند شوید. این سایت به شما کمک می کند درکنار معرفی رنگ بندی های مختلف، با وب سایت هایی که رنگ بندی مشابه ترکیب رنگی مورد نظر شما دارند، نیز آشنا شوید. بعنوان آخرین راه حل، پیشنهاد می کنیم به وب سایت هایی چون Template Monster و یا  ThemeForrest نیز مراجعه کنید. ویژگی متمایز کننده این شبکه ها این است که با توجه به موضوع کاری مورد نظر شما، ترکیب های رنگی جالبی را نشان می دهند.

انتخاب رنگ در طراحی وب سایت می تواند به شخصیت سازی و ایجاد هویت بصری برای برند و پایگاه اینترنتی شما تاثیر بسزایی داشته باشد. هیچگاه از مرحله انتخاب رنگ برای وب سایت خود به آسانی عبور نکنید.

]]> http://tarahan.com/%d8%aa%d8%b1%da%a9%db%8c%d8%a8-%d8%b1%d9%86%da%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 اهمیت استفاده از فضای سفید در طراحی سایت http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%81%d8%b6%d8%a7%db%8c-%d8%b3%d9%81%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%81%d8%b6%d8%a7%db%8c-%d8%b3%d9%81%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Sat, 26 Dec 2015 11:55:38 +0000 http://tarahan.com/?p=4763 […]]]> فضای سفید (منفی) در طراحی سایت چیست؟

فضای سفید (منفی) یا همان White Space تکنیکی قدرتمند در طراحی سایت است که به تازگی توجه بیشتری به آن شده است. در واقع نگاهی مینیمالیستی داشته و جزئی مهم در طراحی نوین است.

اهمیت استفاده از فضای سفید در طراحی سایت۲ اهمیت استفاده از فضای سفید در طراحی سایت

شباهت فضای منفی و سطح سفید

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

فضای منفی به دو بخش ماکرو و میکرو تقسیم میشود. بخش میکرو مربوط به فاصله میان اجزای کوچکتر در هر قسمت از سایت و بخش ماکرو مربوط به فاصله میان اجزای اصلی صفحه مانند اسلایدر، آخرین مطالب و فوتر است. در عمل ماکرو در فضای منفی ساختار اصلی صفحه را تعیین کرده و میکرو بر خوانا بودن مطالب و کارایی سایت نظارت میکند.

کاربرد فضای منفی در سایت

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

قبل از استفاده از این تکنیک باید بخش های مهم سایت را برای خود مشخص کنید. هدف شما عضویت کاربران در خبرنامه است یا فروش یک محصول خاص؟ شما ترجیح میدهید که کاربران سایت به چه بخشی از محتوای سایت شما توجه بیشتری داشته باشند یا کدام دسته از محصولات شما سود بیشتری برای شما خواهند داشت؟ معمولا فروشگاه های اینترنتی ۸۰ درصد فروش خود را مدیون ۲۰ درصد از محصولات هستند و بقیه بیشتر برای حفظ اعتبار سایت اضافه شده اند.

زیاده روی در استفاده از فضای خالی

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

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

نمونه هایی از کاربرد فضای منفی

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

گوگل

موتور جستجوی گوگل بارزترین نمونه استفاده از این تکنیک است. بطوریکه تمام توجه کاربران به مهمترین کاربرد سایت که همان جستجو است خواهد بود.

اپل

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

فضای منفی یا Negative Space یک تکنیک یا فن پیشرفته در کدنویسی نیست، بلکه نیازمند صرف زمان و طراحی سایت مناسب برای کاربران می باشد. قبل از هرکاری باید مشخص کنید که کدام بخش اهمیت بیشتری دارد.

]]> http://tarahan.com/%d8%a7%d9%87%d9%85%db%8c%d8%aa-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d9%81%d8%b6%d8%a7%db%8c-%d8%b3%d9%81%db%8c%d8%af-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 هشت نکته در طراحی سایت برای افزایش مخاطب http://tarahan.com/%d9%87%d8%b4%d8%aa-%d9%86%da%a9%d8%aa%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d9%85%d8%ae%d8%a7%d8%b7%d8%a8/ http://tarahan.com/%d9%87%d8%b4%d8%aa-%d9%86%da%a9%d8%aa%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d9%85%d8%ae%d8%a7%d8%b7%d8%a8/#respond Sat, 26 Dec 2015 11:30:43 +0000 http://tarahan.com/?p=4758 […]]]> رعایت چند نکته در طراحی سایت باعث می‌شود که جستجوکننده تبدیل به خریدار یا بازدید کننده همیشگی سایت شما شود. رعایت هشت نکته زیر در این زمینه بسیار تاثیر گذار خواهد بود. موفق ترین وب سایت ها خصوصیات مشترکی در طراحی وب داشته اند که توجه افراد را به خود جلب می نمایند.

رعایت هشت نکته زیر در طراحی سایت می تواند در این امر تاثیرگذار باشد:

 

۱- سرعت در بارگذاری سایت

انتظار بیش ازحد کاربر برای بار گزاری سایت بسیار آزار دهنده است، که اگر این زمان از یک حد مجاز بیشتر شود باعث می‌شود مخاطب سایت شمال را تزک کند. اگرچه سایت شما یکی از بزرگترین سایت ها باشد.

 

۲- داشتن محتوای شفاف در طراحی سایت

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

 

۳- ساده نگه داشتن طراحی سایت

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

هشت نکته در طراحی سایت برای افزایش مخاطب۲ هشت نکته در طراحی سایت برای افزایش مخاطب

 

۴- اهمیت فضای سفید دز طراحی سایت

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

 

۵- اطلاعات تماس خود را در سایت قرار دهید

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

 

۶- آسان سازی فرایند خرید

حرکت از صفحهی اصلی به صفحهی محصولات و چشم انداز آن در صفحهی اصلی برای بازدیدکنندگان را آسان نمایید. این چشم انداز را به صورت زنجیروار نسازید؛ که باعث می شود افراد برای مشاهده و خرید، تمامی صفحات را یکی پس از دیگری برای پرداخت پول به شما سپری کنند. در غیر این صورت آنها را از دست خواهید داد.

 

۷- آسان سازی دستیابی به وب سایت

به یاد داشته باشید تا حد امکان چشم انداز وب سایت خود را از طریق خبرنامه-RSS feed و دیگر مطالب در بالاترین حد دید نگه دارید.

 

۸- به روز رسانی مطالب سایت، به صورت منظم

از این روش انگیزه ای در کاربر ایجاد میشود که برای خواندن مطالب جدید به وب شما بازگردند. بعلاوه موتورهای جستجو به مطالب جدید واکنش خاصی دارد. بنابراین از طریق به روز رسانی مطالب به صورت منظم به سئوی(بهینه سازی) وب سایت خود کمک می کنید.

]]> http://tarahan.com/%d9%87%d8%b4%d8%aa-%d9%86%da%a9%d8%aa%d9%87-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d9%85%d8%ae%d8%a7%d8%b7%d8%a8/feed/ 0 ده اشتباه رایج در طراحی سایت http://tarahan.com/%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%b1%d8%a7%db%8c%d8%ac-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ http://tarahan.com/%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%b1%d8%a7%db%8c%d8%ac-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/#respond Sat, 26 Dec 2015 10:40:03 +0000 http://tarahan.com/?p=4751 […]]]> طراحی سایت های اینترنتی موفق بر حسب تصادف شکل نگرفته‌اند و این موفقیت مرتبط با نوع طراحی سایت و محتوای  وب سایت می‌باشد. برای شناخت برخی از اشتباهات رایج و در طراحی سایت و همچنین در افزودن مطالب به سایت نکاتی را باید در نظر داشت:

 

۱- طراحی سایت های که ریسپانسیو نیستند

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

 

۲- چیدمان نامناسب طراحی سایت

چیدمان نا مناسب سایت باز دیدکنندگان را از پیدا کردن محتوای خوب سایت باز می دارد. فرقی نمی کند سایت شما چقدر گسترده باشد هدف اصلی کاربر (و موتور جستجو) دسترسی اسان به محتوای مورد نظر است.

 

۳- نداشتن بانک اطلاعاتی از مخاطبین

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

 

۴- کافی نبودن مطالب برای طراحی سایت

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

 

ده اشتباه رایج در طراحی سایت۲ ده اشتباه رایج در طراحی سایت

۵- استفاده زیاد از متن در طراحی سایت

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

 

۶- نداشتن فعالیت در شبکه‌های اجتماعی

رسانه های اجتماعی راه بسیار خوب برای به بازار عرضه کردن سایت شماست. پس باید از آنها استفاده کنید. بنابراین مطمئن شوید که در شبکه های اجتماعی (مانند فیسبوک , گوگل پلاس و…) و مخصوصا سایت های مرتبط به سایت خود فعالیت لازم را دارید.

 

۷- اهمیت ندادن به سئو وب سایت

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

 

۸- استفاده ازعکس هایی با حجم نامناسب در طراحی سایت

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

 

۹- عدم امتحان سایت با مرور گر های مختلف

هر تغییری که در سایت ایجاد می کنید را باید با مرورگر های مختلف آزمایش کنید و مطمئن شوید که در همه ی مرورگر ها سایت شما بدون مشکل باز می شود.

 

۱۰- پایان دادن به به‌روز رسانی پس از اتمام طراحی سایت

زمانی که فکر می کنید کار سایت شما به پایان رسیده است و می توانید به کارهای دیگری بپردازید بزرگترین اشتباه توقف به‌روز رسانی سایت است. مدیر سایت باید به پویایی سایت کمک کند و این تداوم به سایت کمک می کند تا مخاطبانش رو به افزایش باشد.

]]> http://tarahan.com/%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%b1%d8%a7%db%8c%d8%ac-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/feed/ 0 هفت عامل موفقیت وب سایت ها در طراحی http://tarahan.com/%d9%85%d9%88%d9%81%d9%82%db%8c%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%87%d8%a7-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c/ http://tarahan.com/%d9%85%d9%88%d9%81%d9%82%db%8c%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%87%d8%a7-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c/#respond Thu, 24 Dec 2015 06:11:38 +0000 http://tarahan.com/?p=4689 […]]]> موفقیت وب سایت هدف اصلی شکل گیری هر وب سایتی است. همه ما پس از بازدید از یک وب سایت، به صورت طبیعی در خصوص خوب یا بد بودن آن وبسایت به نظری خواهیم رسید. بعضی از سایت ها برای ما بسیار خوش آیند هستند و باعث بازگشت چند باره ما به آن وبسایت در مرورهای بعدیمان در اینترنت میشود ولی برخی دیگر از وب سایت ها را برای اولین و آخرین بار است که مشاهده میکنیم و رغبتی برای مراجعه مجدد به آن نداریم. اما چه چیزی تعیین کننده این است که یک وب سایت از نظر ما خوب است یا بد؟

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

۱- هدف/ مهمترین عامل موفقیت وب سایت

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

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

هدف باید نسبتا خاص باشد، به طور مثال هدفی مانند اینکه “من میخواهم به بزرگترین کسب و کار اینترنتی در کشور برسم” هدف مناسبی نیست و به صورت دقیق بیان کننده آن چیزی که شما میخواهید انجام دهیم نمیباشد. به جای این شما میتوانید بگویید ” من میخواهم از طریق وب سایتم مرجع اصلی معرفی خدمات خود و ارائه خدمات پشتیبانی به مشتریا خود باشم”.

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

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

۲- وضوح راهی برای کسب موفقیت وب سایت

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

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

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

۳- قابلیت استفاده نیاز اولیه کاربران سایت

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

سایت هایی که مشکل در قابلیت استفاده خود دارند همواره در تلاشند تا بازدید کننده خود را با عوامل مختلفی در سایت نگه دارند اما چیزی که مشخص است، با توجه به سهولت تعویض سرویس دهنده ها در اینترنت برای بازدید کنندگان، آنها با کمترین مشکلی در روند کاری خود اقدام به ترک سایتی مینمایند که قابلیت استفاده مناسبی نداشته باشد.

business ۸ هفت عامل موفقیت وب سایت ها در طراحی

۴- دسترس پذیری عاملی برای کسب موفقیت وب سایت

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

معمولا وب سایت های موثر دارای سطح دسترس پذیری وسیعی میباشند و به مخاطب خود اجازه انتخاب میدهند.

۵- تمرکز بر روی کاربر اولویت طراحی برای موفقیت وب سایت

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

۶- جابجایی در محتوا یا ناوبری در سایت

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

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

۷- تاثیر ظاهر در موفقیت وب سایت

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

روندهای طراحی وب سایت، بسیار سریع و متناسب با تکنولوژی های جدید در حال تغییر است و یک وب سایت زمانی میتواند به موفقیت دست یابد که درک داشته باشد در این رقابت همیشه باید به روز باشد. بسیاری از وب سایت های موفق روند بازطراحی خود را هر چند سال یکبار تکرار میکنند تا بتوانند بهترین خدمات را بر اساس تکنولوژی های روز به کاربر ارائه دهند. طراحی یک سایت باید تکمیل کننده محتوای یک سایت باشد، نه یک رغیب برای محتوای سایت! در نظر داشته باشید که همواره سبک طراحی وب سایت با پیام و هدف سایت نیز باید تناسب داشته باشد تا بتوان بهترین بازخورد را از کاربر دریافت کرد.

منبع : vandelaydesign.com

]]> http://tarahan.com/%d9%85%d9%88%d9%81%d9%82%db%8c%d8%aa-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d9%87%d8%a7-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c/feed/ 0