کاربر آیکون ها در طراحی رابط کاربر و تجربه کاربری

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

چرا آیکون ها ابداع شدند؟

آیکون ها اولین بار در دهه 70 میلادی توسط کمپانی زیراکس به عنوان ابزاری برای کمک به کاربران در راهبری به وجود آمدند. (ویکی)

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

آیکون هایی که معنای پیشفرض دارند:

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

  1. شمایل های استاندارد شده بر روی دستگاه های الکترونیکی (مانند آیکون روشن/خاموش)
  2. آیکون هایی که از روی وسایل روی میز کار ما طراحی شده اند و به استعاره به کار می روند.
  3. آیکون هایی که نماینده برند تجاری خاصی هستند.

 آیکون ها در وب

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

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

Description: آیکون ها در طراحی وب

  • آیا چرخ دنده معنای “موضوعات وبلاگ” میدهد ؟
  • آیا تلویزیون شما را یاد “انتخاب قالب” می اندازد؟
  • آیا آیکون فولدر را میشود به جای “پست ثابت” استفاده کرد؟
  • آیا آیکون لامپ معنی “پیوندهای وبلاگ” را دارد؟

حالا با هم آیکون های سرویس وبلاگ بلاگر را بررسی می کنیم:

Description: آیکون در طراحی سایت

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

کاربرد رنگ در طراحی آیکون :

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

آیکون ها باید با متن لینک همراه باشند

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

شاید برنامه شما نیازی به آیکون نداشته باشد!

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

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

آموزش HTML 5 به زبان فارسی آدمیزادی

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

تفاوت HTML با XHTML در چیست : اگر شما با زبان HTML کار کرده باشید، احتمالا براتون پیش آمده که گاهی تگ  <p> را بصورت تکی و بدون تگ بسته به کار ببرید. این موارد در HTML تاحدی مجاز است. اما در XHTML شما باید استانداردهای XML را رعایت کنید. یعنی کلیه تگ ها باید بصورت دوتایی (تگ باز و بسته) تعریف شوند. با تعریف DOCTYPE مناسب در بالای صفحه، می توانید به مرورگر بفهمانید که از HTML استفاده کرده اید یا از XHTML. تگ هایی مانند <BR> هم که تکی هستند باید بصورت <br /> نوشته شوند.

تفاوت HTML 4 با نسخه 5 در چیست: با گسترش اینترنت، طراحان متوجه شدند که نیازهایی دارند که کدهای HTML4 و حتی XHTML آنها را برآورده نمیکند. مثلا امکان نمایش انیمیشن در صفحات وب نیازمند برنامه هایی همچون flash بود که عملا بخش استانداردی از وب به حساب نمی آیند. همچنین قابلیت های جدیدی مانند کشف مکان جغرافیایی کاربر (توسط شبکه یا جی پی اس) و ذخیره سازی آفلاین در مرورگر چیزهایی بود که در HTML4 وجود نداشتند. این شد که کنسرسیوم وب (W3C) نسخه جدیدی از وب را (با همکاری گروه WHATWG) منتشر کرد. و اچتمل 5 متولد شد.

احتمالا می دانید که در HTML 4 برخی تگ ها معنا دار هستند. مثلا تگ H1 برای عنوان صفحات بکار میرود. فارغ از اینکه کجای صفحه باشد یا چه رنگی به آن نسبت دهید. اما تگهای دیگر مانند DIV که عملا بخش های مهم صفحه را از هم جدا میکند، معنایی نداشتند. یکی از ویژگی های اولیه HTML5 تعریف تگهای معنادار جدید به جای Div است.

آموزش تگ های html5

تگ Header و Footer: همه ما در سایتهایی که طراحی میکنیم، یک بخش هدر و یک فوتر داریم. (منظور از هدر، بخش بالایی سایت است.پس آنرا با تگ head اشتباه نگیرید. تگ head همچنان کاربرد خودش را دارد). در HTML 4 برای تعریف هدر معمولا شاهد چنین ساختاری هستیم:

احتمالا یک CSS هم مانند کد زیر تعریف می کردید:

 

خب ، کافیه بجای استفاده از تگ div از تگ header استفاده کنید. همین ! و کد شما اینجوری خواهد شد:

 

بقیه کد نیازی به تغییر ندارد. اما از آنجا که احتمالا فقط یکبار از تگ header در صفحه استفاده میکنید، می توانید class=header را نیز انتهای تگ header در خط اول حذف کنید و در CSS بجای تعریف کلاس header ، خاصیت های آنرا به تگ header نسبت دهید.

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

 

تگ های جدید هم مانند تگ های قدیمی می توانند class و id و حتی style بگیرند و خلاصه چیز عجیب و غریبی نیستند. (گرچه بهتره که بجای style های داخل تگی، از class استفاده کنید.)

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

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

 

تگ section: این تگ برای جداکردن بخش های مختلف از یک محتوای بهم مرتبط کاربرد دارد. مثلا شما چند باکس دارید که بصورت tab در کنار هم نمایش داده میشوند . هر tab می تواند یک section باشد. یا اگر فوتر سایت شما چند بخش مجزا دارد، هر بخش آن می تواند یک section باشد. مانند فوتر سایت html5 Herald . توجه کنید که بخش هایی که در section قرار میدهید، بطرز معنایی باید به نحوی با هم مرتبط باشند. اگر این بخش ها ربطی بهم نداشته باشند، استفاده از تگ section اشتباه است و باید همان تگ div را بجایش به کار ببرید.

 

توجه کنید که ما همچنان برای جداسازی گرافیکی ستون ها از تگ div استفاده میکنیم. اما برای جداسازی معنایی (مثلا مشخص شدن یک مقاله، یک بخش از یک صفحه یا لینکهای پیمایش اصلی) از تگ های معنادار استفاده میکنیم. تگ های معرفی شده، مهم ترین تگهای html5 هستند که جایگزین تگ های فعلی شما میشوند. همچنین تگ های جدیدی مانند canvas در html5 معرفی شده اند که کاربرد های جدیدی را به html اضافه میکنند. در مقالات بعدی شما را تگ های جدیدتر آشنا خواهیم کرد.

طراحی سایت ریسپانسیو چیست؟ و چگونه ایجاد شد

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

سایز استاندارد طراحی وب

مرحله اول : طراحی با پهنای ثابت

تا همین چند سال پیش، (و به دلیل محبوبیت ویندوز ایکس پی) رزولوشن نمایشگر اکثر کاربران روی 800×600 تنظیم بود و سایتها نیز برای مطابقت با این اندازه طراحی می شدند. کسانی هم که مانیتور  بزرگتری داشتند، می توانستند سایت را به درستی مشاهده کنند و فقط کمی فضای خالی در کناره های سایت می‌دیدند. کمی گذشت و با گسترش ویندوز7 که رزولوشن مانیتورها افزایش پیدا کرد، سایز 1024×768 به سایز استاندارد برای طراحی رابط کاربری صفحات وب تبدیل شد. در این دوران معمولا پهنای صفحات وب، سایز ثابتی داشت.

مرحله دوم : طراحی شناور (fluid)

کم کم طراحان برای سازگار کردن سایز سایت با سایز صفحه به روش شناور  (fluid) روی آوردند. در این روش width ستون های سایت بجای واحد پیکسل با واحد درصد مشخص میشد و هرچه کاربر عرض مرورگرش بزرگتر بود، ستون های سایت را نیز با پهنای بیشتری مشاهده می کرد. (طراحی شناور در اصل تلاشی بود برای هماهنگ سازی سایت با پهنای مرورگر کاربر و شاید بتوان ریشه طراحی ریسپانسیو را، طراحی شناور عنوان کرد.) با گسترش سخت افزارها و روند رو به رشد لپ تاپ ها کم کم سایز1366×768 جای سایز قبلی را گرفت. اما هنوز میشد با استفاده از طراحی شناور، سایتهای قابل قبولی برای پهنای صفحه 800پیکسل تا 1366 پیکسل طراحی کرد.

مرحله سوم: ظهور موبایلها و صفحات کوچک

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

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

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

طراحی سایت ریسپانسیو

مرحله چهارم: طراحی سایت ریسپانسیو، انقلابی در طراحی رابط کاربری

با افزایش سرعت دسترسی موبایل و ظهور تکنولوژی 3G و 4G ، اکثر کاربران بجای کامپیوتر، از موبایل یا تبلت خود برای گشت و گذار در وب استفاده میکنند. و متعاقبا دارندگان سایتها نیز ترجیح میدهند سایت آنها در موبایل و تبلت هم قابل استفاده باشد. در این زمان (حول و حوش 2010) اکثر کاربران نیز از مرورگرهای مدرن استفاده میکنند که تا حدی CSS را پشتیبانی میکند. همچنین در موبایل و تبلت ها، به دلیل ظهور دیروقت آنها در عرصه وبگردی، اکثرا مرورگرهای جدیدی وجود دارد که از مدیاکوئری های CSS به خوبی پشتیبانی میکند. اینگونه شد که طراحان تصمیم گرفتند تا بجای تعریف یک CSS برای چیدمان هر صفحه، از چندین فایل CSSکمک بگیرند تا بتوانند جای المان ها را در سایزهای گوناگون صفحات و مرورگرها تغییر دهند.

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

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

فریم ورک های طراحی ریسپانسیو

مرحله پنچم: ظهور فریم ورک های ریسپانسیو

با گسترش طراحی ریسپانسیو، شرکتها و گروه های نرم افزاری، ابزارها یا فریم‌ورک هایی برای تسریع طراحی ریسپانسیو ارائه کردند. از آنجایی که اکثر طرح های ریسپانسیو باید در سه سایز دسکتاپ، تبلت و موبایل اجرا شوند، این فریم‌ورک‌ها نیز روی همین سه سایز زوم کرده اند. یک فریمورک معمولا شامل یکسری CSS از پیش تعریف شده است هنگام طراحی، شما بجای تعریفclass های جدید، از نام های کلاس های این فریمورک ها استفاده میکنید. محبوب ترین فریمورک های موجود بوت استرپ وفاندیشین هستند.

مرحله ششم : زبان اسکریپت نویسی در CSS

اسکریپت sass و less

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

مدیریت محتوا با CMS های بدون دیتابیس

شاید برای شما جالب باشد بدانید که سیستم های مدیریت محتوایی هستند که دیتابیس (به شکلی که ما میشناسیم) ندارند. اما این سیستم های مدیریت محتوا چگونه کار می کنند؟ و کاربرد آنها چیست؟ و چرا با پیشرفت دیتابیس ها، چنین CMS هایی بوجود آمده اند؟

بدون دیتابیس

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

شاید اسم بدون-دیتابیس برای این CMS ها کمی نامناسب باشد. چون بالاخره هر نرم افزاری اطلاعات خود را جایی ذخیره میکند. این CMS ها از سیستم های دیتابیس فایلی استفاده میکنند. برخی از آنها اطلاعات را در داخل فایل معمولی text ذخیره میکنند و برخی دیگر از فایلهای ساختاریافته مانند XML یا flat-file-db استفاده میکنند که داده ها را در فرمت خاصی که قابل بازیابی باشد در یک فایل ذخیره میکنند و در مواقع لازم در سایت نمایش میدهند.

کاربرد سیستم های مدیریت محتوای بدون دیتابیس چیست؟

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

مزایای cms های بدون دیتابیس: 

  1. سادگی در طراحی و برنامه نویسی : کدنویسی بدون وجود SQL بسیار ساده تر است. هم چنین در صورتی که نیاز به نصب مجدد یا انتقال هاست داشته باشید، کارتان بسیار ساده خواهد بود.
  2. استفاده از حداقل منابع و دریافت کارایی استاندارد: در برنامه نویسی سعی کنید از چیزی که لازم نیست (حتی اگر آن چیز دیتابیس باشد) بیخود در پروژه استفاده نکنید. بسیاری از وب سایتهایی که از CMS هایی نظیر جوملا و وردپرس استفاده میکنند، با یک CMS بدون دیتابیس هم قابل راه اندازی هستند. پس لازم نیست در هر پروژه کوچکی، دیتابیس قدرتمندی مانند mySQL را درگیر کنید.
  3. کاهش هزینه ها: هاست هایی که از دیتابیس پشتیبانی نمی کنند معمولا ارزان تر هستند.

معرفی چند CMS بدون دیتابیس رابطه ای: 

1 – GetSimple : اوپن سورس و به زبان PHP  است.  راه اندازی اش راحت است. پس از نصب وارد آدرس /admin شوید. تا به بخش مدیریت cms دسترسی پیدا کنید. امکان افزودن پلاگین و قالب نیز دارد. اگر به مشکلی بر خوردید به سایتش مراجعه کنید. مطالب مفید و کاملی درباره این برنامه در سایتش موجود است.

2 – CMSimple: اوپن سورس و به زبان PHP  است. این cms نیز مانند قبلی، از پلاگین و قالب پشتیبانی میکند. همچنین اگر میخواهید با آن وبلاگ راه بیندازید یک پکیج آماده بنام CMSimpleBlog دارد که کارتان را سریع تر خواهد کرد. چون کار خود CMS های بدون DB فقط ایجاد صفحات و ذخیره آنها است. اما اگر یک وبلاگ بخواهید، باید کمی آنرا تغییر دهید که خوب CMSimple قبلا این کار را برای شما کرده است.

cm simple CMS

3- pico : اوپن سورس و به زبان PHP  است. از تم و پلاگین پشتیبانی میکند و پلاگین های خوبی دارد. حتما سری به صفحهپلاگین های این برنامه بزنید.

4- FlatPress :  اوپن سورس و به زبان PHP  است . این CMS بر خلاف قبلی ها، پیشفرض خود را بر روی ایجاد وبلاگ قرار داده است. flatpress یک موتور ساخت وبلاگ بدون دیتابیس و برپایه فایل است. هر پست شما در یک فایل متنی ذخیره خواهد شد. از پلاگین و تم و ویجت هم پشتیبانی میکند.

cms بدون دیتابیس flatpress

5- pivotX : اوپن سورس و به زبان PHP  است. این CMS هم از نسخه بدون دیتابیس و هم از نسخه mySQL پشتیبانی میکند.امکانات خوبی دارد و از پلاگین و تم نیز پشتیبانی میکند. همچنین امکان مدیریت چندین وبلاگ را با یکبار نصب بهتون میده .

cms های بدون دیتابیس

6- RazorCMS : اوپن سورس و به زبان PHP  است. امکانات حرفه ای زیادی دارد. از جمله مدیریت دسترسی کاربران، امکان محدود کردن IP های مزاحم، مدیریت فایل، منوهای چند طبقه و …

7- GuppY : اوپن سورس و به زبان PHP  است. با استفاده از HTML5 و CSS3 طراحی شده است. امکانات راه اندازی بخش اخبار، مقالات، وبلاگ، گالری و فروم را نیز دارد.

گوپی. بدون دیتابیس

بجز CMS های معرفی شده، نرم افزارهای دیگری هم هستند که مثلا برای شما یک ویکیپدیای کوچک بدون دیتابیس ایجاد میکنند. مانند pmwiki یا dokuwiki  یا TiddlyWiki که از فرمت ذخیره سازی فایل بجای دیتابیس استفاده میکنند. همچنین شما می توانید خودتان با استفاده از یک زبان برنامه نویسی تحت وب مانند asp.net یا php ، یک CMS ساده بدون دیتابیس درست کنید و داده های خود را در فایل روی سرور ذخیره و بازیابی کنید.

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

صفحات وب از کدهای اچتـمل (HTML) تشکیل شده است و می توان این کدها را با هر ویرایشگر متن ساده ای مانند notepad نیز نوشت. اما ویرایشگرهای قوی تری برای ایجاد سهولت در کار طراحی وب ایجاد شده اند که علاوه بر سرعت در کدنویسی، باعث بالارفتن دقت در نوشتن کدها نیز میشوند و گاهی ایرادات شما را نیز در کدنویسی میگیرند. برخی از ادیتورها فقط امکان کدنویسی را برای شما فراهم میکنند، اما برخی دیگر به شما این امکان را میدهند که بصورت ویژوال به طراحی صفحات خود بپردازید و المان ها را بصورت drag-n-drop روی صفحه بکشید و صفحه وب خود را تکمیل کنید. البته بر کسی پوشیده نیست که طراحی وب پیشرفته، نیازمند کدنویسی دستی است و به همین دلیل ادیتورهای متنی براحتی با ادیتورهای ویژوال رقابت میکنند!

تعدادی از بهترین ادیتورهای رایگان JS/HTML/CSS :

(در این بخش، نرم افزارهای غیر رایگان مانند دریم ویور را کنار میگذاریم. همچنین یکی از پیش شرط های ما این است که یک HTML Editor باید امکان intellisence برای کدهای اچتمل داشته باشد. به همین دلیل notepad++ را هم بی خیال میشویم)

نرم افزار طراحی وب expression

1- ویرایشگر ویژوال ExpressionWeb : نرم افزار اکسپرژن‌وب محصول مایکروسافت در اکثر رتبه بندیها قدرتمندترین رقیب دریم ویور بوده است و تا پیش از این پولی بود و با قیمت 150 دلار فروخته میشد، اما از سال 2013 مایکروسافت این نرم افزار را بصورت رایگان ارائه میکند و به همین دلیل می توان آنرا بهترین نرم افزار طراحی وب ویژوال رایگان نامید. اما خبر بد اینکه : این آخرین نسخه از این نرم افزار است. زیرا مایکروسافت میخواهد محیطهای طراحی و برنامه نویسی خود را یکپارچه بر روی Visual Studio ارائه کند و دیگر شاهد نسخه بعدی اکسپرژن وب نخواهیم بود.

ویژوال استودیو اکسپرس

2 – ویرایشگر ویژوال Visual Studio Express : نسخه رایگان ویژوال استودیو مایکروسافت، امکان ویرایش صفحات html، css، JS  و asp.net را برای شما فراهم میکند .(لینک دانلود) پس از دانلود، باید برای دریافت کد فعالسازی رایگان، در سایت مایکروسافت ثبت نام کنید.

ویرایشگر aptana html

3 - ویرایشگر متنی Aptana : یکی از بهترین ادیتورهای متنی برای اچتمل ، سی اس اس و جاوا اسکریپت است و بخوبی از اشیاء و خواص جاوا اسکریپت پشتیبانی می کند.

سابلایم تکست

4- ویرایشگر متنی SublimeText : سابلایم تکست یکی از محبوب ترین ادیتورهای HTML/CSS/JS که نسخه رایگان دارد (گرچه برای استفاده تجاری باید لایسنس داشته باشید. اما برای استفاده آموزشی رایگان است). متاسفانه زبان فارسی را به درستی پشتیبانی نمی کند. اما قابلیت های طراحی آن بسیار قوی است و پلاگین های گوناگونی هم برایش نوشته شده است.

ادیتور html براکتس

5- ویرایشگر متنی Bracktes: این ویرایشگر اوپن سورس بسیار خوش دست است و مخصوص کاربرانی طراحی شده است که عقیده دارند کد را باید خط به خط نوشت و نباید از ابزارهای ویژوال مانند دریم ویور استفاده کرد. براکتس به تازگی و با حمایت شرکت ادوبی وارد بازار ادیتورها شده است. پلاگین و تم های زیادی نیز دارد. این روزها من فقط از این ادیتور استفاده می کنم و دریم ویور را به ندرت به کار می گیرم. از دستش ندهید.

webmatrix طراحی قالب وردپرس با

6- محیط مجتمع WebMatrix : وب ماتریکس بهترین IDE برای طراحی قالب برای CMS های اوپن سورس است که توسط مایکروسافت ارائه شده است. اگر برای هریک از سیستم های مدیریت محتوا مانند جوملا، وردپرس، دات نت نوک و … قالب طراحی میکنید، این پکیج مایکروسافت برای شروع کار عالی است. این نرم افزار، یک سرور آپاچی و دیتابیس mySql هم برای شما نصب میکنه و درضمن CMS مورد نظر شما (مثلا وردپرس) را در یک کلیک براتون نصب میکنه تا یک سرور php برای تست قالبهای خود داشته باشید.

kompozer html editor

7- ویرایشگر ویژوال Kompozer : یک نرم افزار ویژوال خوب و رایگان برای طراحی صفحات وب با امکان مدیریت CSS ها و تعریف webSite برای مدیریت بهتر صفحات پروژه جاری است و توسط بنیاد موزیلا پشتیبانی میشود.

blue griffon html editor

8- ویرایشگر ویژوال Blue Griffon : یکی برنامه رایگان برای طراحی صفحات وب است که از روی پروژه kompozer ایجاد شده است. محیط ویژوال و قابل درکی دارد. این برنامه نیز توسط بنیاد موزیلا پشتیبانی میشود. این ادیتور امکان تغییر رنگ ادیتور را نیز دارد. (صفحه را در حالت source view بگذارید. حالا وارد منوی view شوید. گزینه source view و سپس theme)

9- ویرایشگر متنی Komodo Edit : این نرم افزار رایگان، بهترین نرم افزار ویرایش فایلهای XML است. زبان html و CSS را هم پشتیبانی میکند و درضمن می توانید پشتیبانی از زبان های برنامه نویسی دیگر را هم بصورت پلاگین به این نرم افزار اضافه کنید. (این برنامه یک نسخه پولی هم بنام Komodo IDE دارد). همچنین برای تغییر تم رنگی ادیتور برنامه، از منوی edit وارد گزینه prefrences شوید و برگه fonts and colors را باز کنید، منوی پایین افتادنی وسط صفحه را بازکنید تا سایر پلت های رنگی ادیتور را ببینید.

ویرایشگر html

10- ویرایشگر متنی CodeLobster : ویرایشگری قدرتمند در کار با کدهای HTML و CSS است و در هنگام استفاده از کدهای CSS حتی به شما نشون میده که هر دستور در چه مرورگرهایی قابل استفاده است..

eclipse محیط کد نویسی

11- ویرایشگر متنی Eclipse classic : یکی از معروف ترین ویرایشگرهای متنی برای طراحان وب و برنامه نویسان جاوا است. این IDE امکان پشتیبانی از زبان های دیگر را هم دارد و کافیست پلاگین زبان یا خروجی خود را دانلود کنید و به قابلیت های آن بیفزایید. مثلا می توانید پلاگین ADT را به این نرم افزار اضافه کنید تا بتوانید برای اندروید برنامه بنویسید.

12- ویرایشگر متنی Coffeecup HTML Editor : یک ادیتور کدهای اچتمل رایگان، با پشتیبانی از HTML و CSS ، یک نسخه پولی هم دارد که امکانات بیشتری را در اختیار شما قرار میدهد، اما نسخه رایگان آن برای یک طراح وب کافی است.