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

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

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

آیکون ها اولین بار در دهه 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 ، یک نسخه پولی هم دارد که امکانات بیشتری را در اختیار شما قرار میدهد، اما نسخه رایگان آن برای یک طراح وب کافی است.

بهترین نرم افزار های ساخت شبکه اجتماعی آنلاین

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

1 – BuddyPress: این نرم افزار از شرکت محبوب وردپرس ارائه شده است. این نرم افزار کاملا رایگان است و امکانات استاندارد و خوبی دارد و شما می توانید با استفاده از پلاگین هایی که برای این نرم افزار نوشته شده، قابلیت های آنرا اضافه کنید.

2 – Pligg : پلیگ یک CMS برای انتشار محتوا با بینهایت کاربر است. اگر شما به فکر ایجاد یک community از نویسندگان هستید که در تولید  محتوا در سایت سهیم باشند ، پلیگ می تواند انتخاب خوبی باشد.

3 – elgg : الگ نیز یکی دیگر از CMS های اوپن سورس برای راه اندازی هرگونه شبکه اجتماعی است. از شبکه اجتماعی کوچکی برای شاگردان یک مدرسه تا شبکه اجتماعی دانشگاه ها. این CMS بر روی LAMP (Linux, Apache, MySQL, and PHP) نصب میشود و به همین دلیل برنامه نویسان رابطه خوبی با آن دارند و پلاگین هایی نیز برای آن نوشته اند.

4 -lovD by less : یکی دیگر از CMS های ایجاد شبکه های اجتماعی با قابلیتهای کامل.

5 – mixxt.com : شبکه اجتماعی خود را در چند دقیقه ایجاد کنید. میکست در نسخه پولی اش چیزهای بیشتری هم به شما ارائه میدهد که می توانید شبکه خود را گسترده تر کنید.

6 – Xoops : زوپس یکی از CMS های محبوب در سایت سورس‌فورج  است و شما با آن می توانید از یک وبلاگ شخصی تا یک شبکه اجتماعی بزرگ ایجاد کنید. برای گسترش سایت خود کافیست ماژولهای community را به برنامه اضافه کنید.

7 – mahara.org : این CMS بیشتر روی ایجاد portfolio های آنلاین برای کاربران کار میکند (چیزی شبیه لینکدین) اما قابلیت های کامل شبکه های اجتماعی را نیز دارد .

 8 – Dolphin: یکی از محبوبترین CMS های ایجاد شبکه اجتماعی.

9 – anahita : آناهیتا خود را یک فریم ورک شبکه اجتماعی می داند که شما می توانید برپایه آن ، انواع شبکه های اجتماعی را ایجاد کنید.

10 – oxwall: یک شبکه اجتماعی پویا و ساده را با این نرم افزار تجربه کنید.

11 – community engine : یک شبکه اجتماعی که با استفاده از Ruby on rails راه اندازی شده است.

12 – peoplepods.net : یک CMS برای ایجاد شبکه اجتماعی که پشتیبانی نسبتا خوبی نیز دارد و راحتی قابل انگولک و شخصی سازی است.

13 – phpfox.com : اگر به دنبال ایجاد یک شبکه اجتماعی شبیه فیسبوک و مانند آن هستید ، پی اچ پی فاکس یکی از آماده ترین هاست:

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

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

یافتن و تغییر User agent موبایلها در مرورگر کروم

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

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

هر مرورگری یه پارامتری داره بنام USER AGENT (بطور خلاصه UA) که مثل شناسنامه ی مرورگر است و اطلاعاتی از سیستم عامل ، نوع مرورگر ، موتور رندر مرورگر و نوع دستگاهی که این مرورگر روش نصب هست را ارائه میده. شما بعنوان برنامه نویس سایت می توانید هنگامی که کلاینت، صفحه ای را درخواست میکند ، همون اول کار با دستوراتی که در asp.net و php و بقیه زبانها وجود دارد، user agent کاربر را تشخیص دهید و بنا به نوع مرورگر کاربر، صفحات گوناگونی رو برایش response کنید.

چند نمونه user agent های مرورگرهای مختلف: 

 

همانگونه که مشاهده میکنید user agent های هر دستگاه یا مرورگر با بقیه متمایز است. اما این رشته های UA یکسری لغات مشترک دارند. مثلا کلمه MIDP در رشته UA کلیه گوشیهایی که جاوا را پشتیبانی میکنند (مانند سونی اریکسون و سامسونگ های ارزان قیمت) وجود دارد. همچنین در UA گوشیهای اندرویدی کلمه mobile یا phone وجود دارد که البته لغت mobile در UA گوشیهای آیفون و آی پد نیز دیده میشود. پس شما کافیست هنگامی که یک request به سرور میرسد user agent او را بگیرید و برای نمایش نسخه موبایل، در رشته user agent دنبال یکی از این کلمات باشید.

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

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

چطور user agent مرورگر خود را عوض کنیم؟

حدود شش ماه پیش گوگل امکان تغییر user agent را به کروم اضافه کرد. هم اکنون با استفاده از افزونه ی User Agent Switcher  می توانید بطور موقت USER AGENT مرورگر خود را عوض کنید و سری به سایتهای گوگل و یاهو و فیسبوک و غیره بزنید تا بجای نسخه اصلی ، نسخه موبایل آنها را روی مرورگر خود ببینید. فقط یک نکته: این افزونه در بخش user agent های پیشفرض اندرویدی که در لیستش داره، هنوز UA مخصوص گوشیهای اندروید را اضافه نکرده. بلکه فقط UA مخصوص تبلت Motorolla XOOM رو داره . پس اگر میخواهید نسخه موبایل صفحه گوگل را با اندروید ببینید، باید خودتان UA مخصوص آنرا اضافه کنید. مثلا می توانید UA مربوط به تبلت گالاکسی تب را اضافه کنید (این تبلت در UA خودش، کلمه mobile را دارد) . برای اضافه کردن UA ها به این افزونه رویش کلیک راست کنید و در بخش options  می توانید UA های موردنیاز خود را اضافه کنید.

لیست user agent مرورگرهای موجود

لیست user agent گوشیهای نوکیا

لیست user agent نسخه های دسکتاپ و موبایل فایرفاکس

طراحی نسخه موبایل : ارسال متن از مرورگر به صفحه پیامک موبایل

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

یکی از امکاناتی که در نسخه موبایل وب سایت ها لازم است ، امکان ارسال لینک یا متن کوتاهی از داخل مرورگر توسط SMS به یک شماره دیگر است. با توجه به اینکه copy-paste کردن در گوشی های موبایل کاری دشوار است، بهتر است شما بعنوان طراح رابط کاربری ، امکاناتی را برای این امر در اختیار کاربر قرار دهید.

کاربرد این موضوع در سایت های خبری بسیار جذاب است. بطور مثال هنگامی که در سایت های خبری در حال خواندن خبری هست ، وجود یک دکمه با عنوان SMS The Title میتواند باعث شود تا خواننده ی خبر با یک کلیک عنوان خبر را برای دوست خود sms کند.

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

همانگونه که در کد فوق می بینید ، خبری که میخواهید ارسال شود به پارامتر body داده شده است . حال اگر صفحه ی شامل این کد را در موبایل مشاهده کنید عبارت “ارسال خبر با پیامک” در گوشی شما قابل کلیک است و با یک کلیک، متن “Footbal e iran va turkiye mosavi shod” به صفحه ارسال پیامک گوشی منتقل میشود و میتوانید آنرا برای دوستان خود ارسال کنید.

نمونه ای از استفاده از این تگ را میتوانید اینجا مشاهده کنید.

پشتیبانی از CSS 3 در اینترنت اکسپلورر 6 و 7 و 8

CSS3 خواصی دارد که کار طراحی وب سایت رو خیلی ساده میکنه و خروجی کار خیلی تمیزتر در میاد. مثلا خواص border-radius برای گرد کردن گوشه های باکس‌ها باعث میشه تا دیگه نیازی به استفاده از عکس برای گوشه های گرد باکس‌ها و منوها نباشد. اما مشکلی که وجود دارد این است که مرورگرهای اینترنت اکسپلورر 6 و 7 و 8 از سی اس اس نسخه 3 پشتیبانی نمی کنند و متاسفانه 50 درصد کاربران سایت های فارسی زبان در زمان نگارش این مقاله، از مرورگر اینترنت اکسپلورر استفاده میکنند.

css3 pie

استفاده از CSS3 در مرورگر IE8 و IE7, IE6
یک گروه بنام CSS3pie اومدن و یک فایل با پسوند htc برای مرورگر IE نوشته اند که یه جورایی مرورگر IE رو مجبور میکنه که برخی از خواص CSS 3 رو نمایش بده. با ضمیمه کردن این فایل در پروژه تون، خاصیت های border-radius و box-shadow و linear-gradiant در مرورگر IE فعال میشوند.

نکته : هنگام استفاده از این کامپوننت ، اون خطی که behavior را شامل میشود باید در آخرین خط تعریف خواص سی اس اس های یک کلاس نوشته شود. همچنین اگر فایل css و فایل htc در یک پوشه هستند یادتون باشه که اون اسلش قبل از pie.htc را حتما حذف کنید. (توجه کنید که آدرس دهی به فایل htc باید نسبت به فایل html ای که قراره نمایش داده شود صورت بگیرد. نه نسبت به فایل CSS)

اما یک فایل با پسوند htc چیست ؟
یک فایل htc یک نوع کامپوننت اچ‌تی‌ام‌ال است که شامل کدها و اسکریپت های Dynamic html است و معمولا برای تغییر دادن رفتار مرورگر اینترنت اکسپلورر از آنها استفاده میشود. فایل های htc در مرورگر IE5 به بالا کار میکنند و با استفاده از خواص htc است که میتوان مرورگر اینترنت اکسپلورر را مجبور کرد که گوشه های گرد را نمایش دهد!

 

موتور رندر مرورگر چیست ؟

 موتور رندر مرورگر که به آن layout engine یا  Rendering engine نیز میگویند یک کامپوننت نرم افزاری است که در قلب هر مرورگری قرار دارد و کار ساخت نمای خروجی صفحات را با استفاده از html و CSS بعنوان ورودی  بر عهده دارد. بسیاری از مرورگرهایی که میشناسید، از یک موتور رندر یکسان استفاده میکنند ، اما قیافه ظاهری متفاوتی دارند.

http://uploadpress.files.wordpress.com/2010/10/520px-layout_engine_usage_share-2009-01-07-svg.png
نمودار رشد استفاده از موتور رندرهای موجود

وقتی دو مرورگر از یک rendering engine استفاده کنند، خروجی یکسانی از یک کد html و css میدهند. بنابراین اگر شما در زمینه طراحی وب سایت مشغول هستید ، باید صفحات وب را طوری طراحی کنید که کلیه این layout engine ها آنها را به درستی نمایش دهند.

مهم ترین Rendering Engine های موجود:
  • Trident : این موتور رندری است که اینترنت اکسپلورر (نسخه تحت ویندوز و تحت موبایل) از آن استفاده میکند. نرم افزارهای معروفی مانند ویژوال استودیو، جی تاک،اوت لوک، لایو رایتر نیز از این موتور رندر برای نمایش صفحات HTML استفاده میکنند.
  • Gecko : این موتور رندر اوپن سورس موزیلا است و فایرفاکس (نسخه تحت PC و تحت موبایل) از این موتور برای نمایش صفحات وب استفاده میکند. مرورگر flock هم تا نسخه 2.5 از این موتور رندر استفاده می کرد. اما ازنسخه 3 به بعد تصمیم گرفته از موتور رندر وب کیت استفاده کند.
  • WebKit : موتور رندر وب‌کیت را مرورگر کروم گوگل ،مرورگر فلوک نسخه 3 ،مرورگر safari و مرورگر موجود در گوشی های s60 نوکیا استفاده میکنند.
  • Presto : این موتور رندر توسط کلیه نسخه های قدیمی مرورگر opera  (نسخه تحت PC و تحت موبایل) استفاده میشود. اوپرا در نسخه های جدید از موتور رندر وبکیت استفاده میکند.
  • KHTML : این موتور رندر  توسط مرورگر کانکوئرر (مرورگر پیشفرض اکثر نسخه های لینوکس) استفاده میشود.

مقایسه : موتورهای Khtml و Presto و Webkit تحت سیستم عامل سیمبیان هم اجرا میشوند، اما بقیه خیر (البته ممکن است با شبیه سازی نرم افزاری قابل اجرا باشند). همچنین کلیه موتورهای رندر فوق بغیر از Trident که مخصوص IE است نسخه تحت لینوکس و مکینتاش دارند.

گوگل کروم: گوگل در طراحی مرورگر خود از ترفند جالبی استفاده کرده است. مرورگر کروم تنظیمات زیرساختی اش مانند مدیریت  proxy و کوکی ها را بر عهده ویندوز گذاشته است ، اما خروجی صفحات را با موتور رندر  خودش ایجاد میکند و به کاربر نمایش میدهد. برای امتحان این موضوع کافیست سعی کنید در بخش options مرورگر کروم ، یک پروکــسی فعال کنید. میبینید که با زدن دکمه ی change proxy setting ، برگه ی internet options  ویندوز برای شما نمایش داده میشود.

اوپرا : این مرورگر که واقعا در حقش داره ظلم میشه استانداردترین مرورگر موجوده که از حداکثر استانداردهای wc3 پشتیبانی میکنه و تست ACID3 رو موفق تر از بقیه مرورگرها پشت سر گذاشته. حتی نسخه موبایل اوپرا هم امتیاز 98 رو از 100 در تست اسید3 کسب کرده ، اما دلیل رشد کم این مرورگر رو میشه نداشتن یک حامی بزرگ دانست. مرورگرهایی مانند IE , chrome , firefox دارای پشتیبان های بزرگی برای تبلیغ و رواج اون ها هستند، اما اوپرا حامی بزرگی نداره و نرخ رشد چندانی نداره.