منوی کاربری

رویاگر • وبلاگ • وب استاندارد ها • 10 خصوصیت یک ادیتور تحت وب مناسب برای سایتهای استاندارد

وبلاگ : وب استاندارد ها / 10 خصوصیت یک ادیتور تحت وب مناسب برای سایتهای استاندارد

چکیده آخرین پستها
شهریور 3

10 خصوصیت یک ادیتور تحت وب مناسب برای سایتهای استاندارد

سه شنبه 5:53 عصر توسط مصطفی مقدم 18 نظر ( 1062 بازدید )

ادیتورهای تحت وب

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

  1. در شرایط مختلف خروجی های ادیتور را چک کنید. اگرچه بازار پر است از ادیتور هایی که با تغییر پیکربندیشان کدهای استاندارد HTML یا حتی XHTML تولید می کنند، برای این ادیتورها تولید کد نامعتبر غیر عادی نیست.
  2. بعضی ادیتورها دارای امکان نمایش کد منبع (source-code view) هستند. بسته به سطح کاربران نویسنده محتوی سایت، این خصوصیت ممکن است نیاز به فعال و یا غیر فعال شدن داشته باشد. بعضی ادیتورها دارای نوعی الگوی مجوز دهی هستند که می تواند برای بعضی کاربران امکان نمایش کد منبع را فعال کند و برای بعضی نه.
  3. خصوصیات مرتبط به کنترل نحوه نمایش محتوی (لایه دوم) در ادیتور باید محدود شوند. امکاناتی که رنگ فونت، نوع فونت و رنگ پس زمینه را کنترل می کنند را غیر فعال کنید. همانطوریکه می دانید این خصوصیات فقط باید با CSS کنترل شوند.
  4. ادیتور باید امکان اعمال کردن کلاسهای CSS را داشته باشد. یک ادیتور خوب پیوستگی یک فایل CSS را به ادیتور پشتیانی خواهد کرد. بعضی ادیتورها نیاز دارند که توسط طراح برای اینکه کدام گزینه به منوی CSS آنها افزوده شود تنظیم شوند. بهترین ها از نوع محتوی متن حمایت خواهند کرد و فقط اجازه بکار بستن کلاسها بر پایه قوائد CSS را خواهند داد. مانند جلوگیری از افزودن قائده p.error به یک <span>.
  5. پشتیبانی کلاسهای CSS توسط ادیتور باید شامل امکانی برای اعمال کردن CSS به عناصر معین شده باشد. به عبارتی دیگر دادن کلاس به یک <li> در داخل <ul> توسط نوعی فرایند انتخاب، باید به سادگی دادن کلاس به یک <ul> باشد. یک روش رایج برای این کار یک کلیک ساده برای انتخاب آن عنصر در ساختار درختی DOM در نوار وضعیت است. (body > div > ul > li > a).
  6. به علت اینکه ممکن است قوائد تعریف شده در CSS اصلی برای تفسیر توسط ادیتور خیلی پیچیده باشند و قوائد محتویات کامل، مانند عنصر <p> داخل contents# در مقابل related# ممکن است قابل اجرا و پشتیبانی نباشد، فایل های CSS ی که با ادیتور پیوسته شده است ممکن است خلاصه ای از فایل های CSS اصلی باشد. بسته به محتوایی که ویرایش می شود، استفاده از چندین فایل CSS می تواند راه حل دیگری باشد.
  7. ادیتور باید تگ های پایه معنی گرای XHTML مانند تگ های سرصفحه (h1-6)، قالبندی پاراگرافها، حداقل دو نوع از لیستها، بلاک نقل قول (blockquote)، متن از قبل قالبندی شده و آدرس ها را پشتیبانی کند.
  8. همچنین یک ادیتور مناسب تگ های نامعتبر و ناخواسته را از محتوی الصاقی از Clipboard پاک می کند و یا تنظیماتی برای پاکسازی محتویات الصاقی خواهد داشت. غالباً هنگام الصاق محتویات از برنامه های پردازشگر متن یا صفحات وب به داخل ادیتورهای WYSIWYG، قالب بندی آنها حفظ می شوند. وقتی این اطلاعات با کدهای معتبر ترکیب می شوند اغلب باعث نامعتبر شدن آنها شده و Style هایی را به محتوی اضافه می کنند که باید از بیرون محتویات و توسط CSS اضافه و کنترل شوند.
  9. ممکن است لازم باشد که به نویسنده محتوی بگویید در صورتیکه برنامه ادیتور آنها تگ های نامعتبر را از محتویات ورددی پاک نمی کند، آنها باید قبل از الصاق محتویات در داخل ادیتور WYSIWYG، با الصاق آنها در داخل یک ادیتور متن ساده (مانند Notepad) محتویات را از هرگونه قالبندی پاکسازی کنند.
  10. به دنبال ادیتور تحت وبی باشید که بیشترین مرورگرها را پشتیبانی کرده و به خصوصیات اشاره شده در بالا دست بیابد. اگرچه ادیتورهای امروزی برای Windows و هم برای Mac OSX با قابلیت سازگاری با تقریباً هر مرورگری در دسترس هستند، این غیر عادی نیست که ادیتور WYSIWYG ی پیدا کنید که فقط برای IE پیکر بندی شده باشد.

ادیتور پیشنهادی: CKEditor

CKEditor با مرورگرها و سیستم عامل های مطرح سازگار استCKEditor نمایی از ادیتور

بعد از مدتها جستجو و آزمایش ادیتورهای مختلف، به این نتیجه رسیدم که ادیتور CKEditor بیشترین قابلیت تنظیم و سازگاری را با موارد اشاره شده دارد. CKEditor، ادیتور کد باز (open source) و رایگانی که توسط Frederico Caldeira Knabben نوشته شده، از محبوب ترین ادیتورهای موجود بین طراحان و توسعه دهندگان وب است. امکان Word clean-up این ادیتور بطور خودکار محتویی که از Microsoft Word الصاق می شود را شناسایی و پاکسازی می کند. همینطور با ویرایش چند فایل به سادگی امکانات این ادیتور قابل تنظیم است.

لینکهای مرتبط

نتیجه گیری

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

این پست با نگاهی به کتاب Adapting to Web Standards توسط Christopher Schmitt نوشته شده است.

درباره نویسنده

مصطفی مقدم

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


نظرات

ارسال نظر در مورد این پست
  • 1 Gravatar زهرا سه شنبه، 03 شهریور 1388 http://raoros.com

    سلام، اختیار دارید، آدم که وارد اینجا می شه تازه می فهمه استاد کیه! مدتها بود یک وب سایت مستقل انقدر به دلم ننشسته بود و مشخصه که چقدر مطالبتون براتون ارزش داره که اینهمه زیبا و مرتبه، اینها بدون تعارف بود (چون من حسودم خیلی کم از کسی تعریف میکنم!!!! :D )
    باز هم سر خواهم زد!
  • 2 Gravatar مصطفی مقدم سه شنبه، 03 شهریور 1388 http://www.edreamer.ir

    متشکر از لطف شما. لینک سایتتون رو در رویاگر خواهم گذاشت.
  • 3 Gravatar علیرضا چهارشنبه، 04 شهریور 1388 http://esmram.blogfa.com

    سلام و سپاس بخاطر پست مفیدتون. اما یک سوال ؟
    من فکر می کنم یکی از نکاتی که خیلی می تونه مهم باشه اینه که قابلیت File Upload و همچنین File Browser خوبی برای آن پوشه ای که جهت این کار تعریف شده داشته باشد.

    FckEditor این قابلیت را بخوبی و بصورت سورس باز پشتیبانی می کند. آیا ادیتور CK هم همچین قابلیتی دارد ؟

    نکته بعدی در مورد زمان بارگذاری این ادیتور هست! آیا شما این ادیتور را از نظر زمان بارگذاری برتر از FCK می دانید ؟

    باز هم ممنون به خاطر این پست. این روز ها بحث استفاده از ادییتور خیلی گرمه.
  • 4 Gravatar مصطفی مقدم چهارشنبه، 04 شهریور 1388 http://www.edreamer.ir

    @علیرضا:

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

    نکته دیگه اینکه هدف اصلی من در این پست راهنمایی وب مسترها برای حرکت به سمت وب استانداردها و حفاظت از نتیجه کاری که داشته اند بوده، نه فقط خصوصیات فنی ادیتور.
  • 5 Gravatar Max پنجشنبه، 05 شهریور 1388

    سلام .
    البته من از tinyMCS استفاده مي كنم اما اين رو هم گرفتم تا اگر تونستم استفاده كنم .
    اينكه كد رو از استايل هاي ورد تميز ميكنه خيلي خوشم مياد .
    در پناه خدا موفق و پيروز باشي
  • 6 Gravatar مصطفی مقدم سه شنبه، 10 شهریور 1388 http://www.edreamer.ir

    علی جان هدفم از معرفی این ادیتور تبلیغ برای اون نبود. ادیتور شما هم ادیتور خوبیه. مهم اینه که با روشهای گفته شده ادیتور خودمونو طوری تنظیم کنیم تا زحماتمونو هدر نده.
  • 7 Gravatar حمید چهارشنبه، 11 شهریور 1388

    با سلام!
    از این ادیتور چطور در پروژه های Asp.Net استفاده کنیم؟
    هر چی باهاش ور رفتم نتونستم کاری بکنم!
    اگه نمونه پروژه ی دات نتی که از این ادیتور (آخرین نسخش) استفاده کرده، ممنون میشم برام ارسالش کنین.
    ایمیل من: Hrhb.Mail@Gmail.Com
    مرسی
  • 8 Gravatar حمیدرضا پنجشنبه، 12 شهریور 1388

    با سلام . من با این لینکی که گذاشتید ckeditor نسخه 3 رو دانلود کردم . برای راه اندازی فایل dll لازم داره که من نتونستم پیدا کنم تو سایتشم نبود. هر چی هم تو اینترنت گشتم پیداش نکردم
    منم اینو برای دات نت می خوام ، اگه ممکنه یه لینک کامل برای دانلود بذار و اگر محبت کنی یه راهنمایی هم برای نصبش بگی ممنون میشم.
  • 9 Gravatar مصطفی مقدم پنجشنبه، 12 شهریور 1388 http://www.edreamer.ir

    @ حمید:

    حمید عزیز، در حال حاضر من از نسخه قدیمی این ادیتور یعنی FCKEditor استفاده می کنم. باید به زودی به نسخه 3 ارتقا بدم. به زودی مقاله ای درباره این نسخه جدید خواهم نوشت.
    پس گوش به زنگ پستهای جدید رویاگر باشید!
  • 10 Gravatar مصطفی مقدم پنجشنبه، 12 شهریور 1388 http://www.edreamer.ir

    @ حمید رضا:

    من یه چیزایی بعد از جستجوی بسیار پیدا کردم. اگر بهم وقت بدید چک می کنم و خبردارتون می منم.
    درباره نحوه نصب هم همینطوریکه گفتم پستی خواهم داشت.
  • 11 Gravatar مصطفی مقدم يكشنبه، 15 شهریور 1388 http://www.edreamer.ir

    متوجه شدم که هنوز کنترل های سمت سرور برای NET. آماده نشده اند. و تنها راه استفاده از این ادیتور کامل در این زمان، استفاده از API های جاوا اسکریپته اونه.

    خود آقای Frederico Caldeira Knabben فرمودند: "بعد از انتشار اولین سری از نسخه 3 این ادیتور، کنترل های سرور که فقط شامل امکان یکپارچه سازی جاوا اسکریپته رو عرضه می کنیم."

    شخصاً ترجیح دادم که تا آماده شدن نسخه .NET اون صبر کنم. بعد از اون مقاله کاملی راجع به نصب و استفاده این ادیتور در ASP.NET خواهم نوشت. اگر هم نیاز به نصب نسخه قدیمی رو دارید، بگید تا راهنماییتون کنم.
  • 12 Gravatar حمید رضا دوشنبه، 16 شهریور 1388

    با سلام و خسته نباشید . ممنون بابت زحمتی که کشیدید . لطفا مراحل نصب نسخه قدیمی اون رو برای دات نت توضیح بدید و لینک معتبر هم برای دانلود معرفی کنید .
    ممنون
  • 13 Gravatar مصطفی مقدم سه شنبه، 17 شهریور 1388 http://www.edreamer.ir

    ظاهراً واسه آماده شدن نسخه جدید تحمل ندارید. با این حال به روی چشم.

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

    http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.0/ckeditor_3.0.zip
  • 14 Gravatar اصغر نیتی 4 ماه قبل http://www.adak-co.ir

    ba salam.
    man az SyrinxCkEditor to websitam estefade kardam.
    va ro systeme khodam khili khob javab mide.ro iis7 ham test kardam kar mikard.
    vali vagti ro site upload mikonam editor load nemishe.in pigam ro ham, mide: Message: 'CKEDITOR' is undefined
    age komakam konin mamnon misham
    .merc
  • 15 Gravatar مصطفی مقدم 4 ماه قبل http://www.edreamer.ir

    سلام،

    در باره SyrinxCkEditor چیزی نمی دونم ولی اسمش خیلی نزدیک به همین fckEditore!
    احساس می کنم در قسمت نصب ادیتور مشکل دارید.
    از صحت تنظیماتتون در webconfig و صحت مسیر ها مطین بشید.

    موفق باشید.
  • 16 Gravatar ریبوار حسین پوری 6 روز و 17 ساعت قبل http://aspdotnet.blogfa.com

    مصطفی جان مرسی از مطلب قشنگت.
    چند آیتم که به نظرم در استفاده از یه ادیتور خیلی مهمه
    1- سبک بودن
    2- یوزر اینترفیس
    3- استفاده راحت

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

    در پناه حق
  • 17 Gravatar علی 3 روز و 11 ساعت قبل http://maktabebidaran.ir

    با سلام
    ببخشید من ckeditor 3.4 رو دانلود کردم
    موقع نصب روی جوملا 1.5 خطا میده که فایل xml وجود نداره
    باید چیکار کنم؟ممنون میشم راهنماییم کنید
    یاعلی
  • 18 Gravatar مصطفی مقدم 3 روز و 9 ساعت قبل http://www.edreamer.ir

    سلام،
    من متاسفانه تجربه ای با نرم افزار های اپن سرس ندام.

    موفق باشید.

ارسال نظر

فرم نظرات




لطفاً توجه کنید که:

  • ورود آدرس وب سایت الزامی نیست.
  • آدرس پست الکتونیکی شما نمایش داده نخواهد شد.
  • لطفاً از کدهای HTML استفاده نکنید.
  • برای ارسال نظرات خود در رابطه با مواردی غیر از این پست از فرم ارتباط استفاده کنید.
  • رویاگر برای نمایش آواتارهای شما از Gravatar استفاده می کند.

چکیده نظرات

برای پیگیری نظرات ارسالی برای این پست در چکیده نظرات ثبت نام کنید.
Antibot Image