https://virgool.io/feed/@royagar ما در رویاگر با بکارگیری قواعد نوین طراحی برای پاسخگویی به چالشهای کسب و کارهای امروزی، طیف کامل خدمات پایه برای راه اندازی، معرفی و ارتقای کسب و کار شما را ارایه می دهیم. royagar.com/works fa 2026-06-20 03:43:11 https://files.virgool.io/upload/users/4727/avatar/rozbYy.png?height=120&width=120 https://virgool.io/@royagar https://virgool.io/@royagar/%D8%A8%DA%A9%D8%A7%D8%B1%DA%AF%DB%8C%D8%B1%DB%8C-fckeditor-%D8%AF%D8%B1-aspnet-oqytzhq9jib1 این مقاله طریقه افزودن، پیکربندی و بکارگیری ادیتور FCKeditor را در وب سایتهای بر پایه ASP.NET تحت پوشش قرار خواهد داد. پیش فرض این مطلب این است که شما تصمیم به اضافه کردن این ادیتور به سایتی از قبل ایجاد شده را دارید. بنابراین در صورتیکه هنوز اقدام به ایجاد سایتی که در آن از این ادیتور استفاده کنید را نکرده اید با اجرای Visual Studio و انتخابFile > New > Web Site و یا ترکیب کلیدی Shift + Alt + N وب سایتی را در مسیر دلخواه ایجاد کنید.یکپارچه سازی FCKeditor و ASP.NETاولین قدم، دریافت FCKeditor و کنترل FCKeditor.net از سایت اصلی است. بخاطر داشته باشید که شما هم به کنترل و هم به فایلهای JavaScript ادیتور نیاز دارید.دریافت ادیتور FCKeditor 2.6.4.1 با حجم 1.34 مگابایتدریافت کنترل FCKeditor.Net با حجم 160 کیلوبایتفایلهای دریافتی را در یک پوشه مجزا باز کنید.FCKeditor_2.6.4.1.zip شامل فایلهای پیکربندی و کد های اسکریپت ادیتور است. محتوی این فایل یعنی پوشه fckeditor را در ریشه سایت خود کپی کنید.در صورتیکه سایت شما حاوی پوشه Bin در ریشه آن نیست با کلیک راست روی نام سایت خود در Solution Explorer و انتخاب Add ASP.NET Folder و سپس Bin آنرا ایجاد کنید.حال فایل FredCK.FCKeditorV2.dll را از مسیر FCKeditor.Net_2.6.3\bin\Release\2.0 فایل FCKeditor.Net_2.6.3.zip، در داخل پوشه Bin سایت خود کپی کنید.قدم بعدی افزودن Reference فایل FredCK.FCKeditorV2.dll به وب سایت است. برای اینکار بار دیگر روی وب سایت خود کلیک راست کرده و گزینه Add Reference را انتخاب کنید.از پنجره Add Reference برگه Browse را انتخاب کرده و سپس FredCK.FCKeditorV2.dll را از پوشه Bin انتخاب کنید.حالا می توانیم کنترل FCKeditor را به جعبه ابزار Visual Studio اضافه کنیم.روی یکی از برگه های جعبه ابزار مثلاً General کلیک راست کرده و گزینه Choose Items را انتخاب کنید.در پنجره باز شده و در برگه NET Framework Components. روی دکمه Browse کلیک کرده و در مسیر پوشه Bin سایت خود، فایل FredCK.FCKeditorV2.dll را انتخاب کنید.بعد از تایید این پنجره آیکن کنترل FCKeditor را در پایین برگه ای که در جعبه ابزار انتخاب کرده اید، مشاهده خواهید کرد.تنظیم FCKeditor برای بکارگیری در ASP.NETفایل web.config سایت خود را باز کرده و در قسمت <appSettings> خط زیر را اضافه کنید:<add key=&quotUserFilesPath&quot value=&quot~/UserFiles/&quot />مسیر مشخص شده برای UserFilesPath به پوشه محل قرارگیری تصاویر و فایلهایی اشاره می کند که توسط ادیتور Upload می شوند. توصیه می کنم از همین مقدار پیش فرض برای نگهداری فایلهای خود استفاده کنید.پوشه UserFiles را در ریشه سایت خود ساخته و مجوز (Permission) خواندن و نوشتن را به آن بدهید.فایل fckconfig.js را از پوشه fckeditor در ریشه سایت باز کرده و خطوط زیر را در آن پیدا کنید:var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | pyحال زبان php را به aspx تغییر دهید. یعنی:var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | pyنکتهفایل fckconfig.js حاوی تنظیمات عمومی ادیتور FCKeditor، مانند حذف و اضافه کردن دکمه ها و امکانات آن است. هر گونه تغییری که در این فایل و یا فایلهای مشابه می دهید را به نوعی علامتگذاری کنید تا قسمتهای تغییر یافته برای اصلاحات احتمالی بعدی به راحتی پیدا شوند. بهترین کار گرفتن یک کپی پشتیبان از فایل fckconfig.js برای بازگرداندن تنظیمات به حالت پیش فرض در موارد خاص است.فایل config.ascx را از مسیر fckeditor > editor > filemanager > connectors > aspx پیدا کرده و تابع زیر را در آن پیدا کنید:private bool CheckAuthentication() { // ... return false; }تا زمانی که این تابع مقدار False را باز می گرداند Administrator سایت امکان مشاهده و Upload کردن فایلها توسط ادیتور را نخواهد داشت. این تابع وظیفه اعتبار سنجی کاربری را که در حال کار با ادیتور است را بر عهده دارد. بدون این تابع هر کاربری می توانست فایل Upload کرده یا محتویات پوشه UserFiles را ببیند. احتمالاً تا اینجا سیستمی برای مدیریت و اعتبار سنجی کاربران سایت خود طراحی کرده اید. پس در این تابع به نوعی اعتبار و Administrator بودن کاربر جاری را چک کنید و در صورت صحت مقدار True را بازگردانید. مثالی برای تایید اعتبار کاربر جاری می تواند اینگونه باشد:return ( Session[ &quotIsAuthorized&quot ] != null && (bool)Session[ &quotIsAuthorized&quot ] == true );در حالیکه مقدار IsAuthorized Session هنگام Login کردن کاربر True شده است.نکتهبه هیچ وجه بدون اعتبار سنجی کاربر، مقدار True را باز نگردانید.در نهایت در همین فایل خط زیر را پیدا کنید:// URL path to user files. UserFilesPath = &quot/userfiles/"مطمئن شوید که مقدار UserFilesPath معادل همان مقداری باشد که در web.config وارد کرده اید.نکتهبرای تنظیم مواردی که در منوی Style ادیتور FCKeditor لیست شده اند فایل fckstyles.xml را در ریشه پوشه fckeditor سایت پیدا و ویرایش کنید. کنترل و تنظیم دقیق خروجی های ادیتور برای حفظ ساختار استاندارد سایت حیاتی است. برای اطلاعات بیشتر مطلب "10 خصوصیت یک ادیتور تحت وب مناسب برای سایتهای استاندارد" را مطالعه کنید.طریقه استفاده از FCKeditorبرای استفاده از این ادیتور دو راه وجود دارد:کشیدن و رها کردن کنترل FCKeditor از جعبه ابزار به صفحه.اضافه کردن کدهای لازم بصورت دستی به کد صفحه به صورت زیر:رجیستر کردن کنترل FCKeditor در ابتدای صفحه:<%@ Register Assembly=&quotFredCK.FCKeditorV2&quot Namespace=&quotFredCK.FCKeditorV2&quot TagPrefix=&quotFCKeditorV2&quot %>سپس افزودن تگ این ادیتور در داخل <"form runat="server>:<FCKeditorV2:FCKeditor ID=&quotFCKeditor1&quot runat=&quotserver&quot></FCKeditorV2:FCKeditor>حال ادیتور برای استفاده آماده است. صفحه را در مرورگر خود باز کنید و با امکانات آن بیشتر آشنا شوید.نکتهبرای بدست آوردن محتوی ورودی کاربر در ادیتور از عبارت fCKeditorInstanceName.Value استفاده کنید. برای اطلاعات بیشتر محتویات پوشه samples_ را از فایل FCKeditor.Net_2.6.3.zip بررسی کنید.نتیجه گیریدر این پست نحوه نصب، یکپارچه سازی و پیکربندی ادیتور FCKeditor، محبوب و پرکاربردترین ادیتور تحت وب که به همراه کنترل اختصاصی برای ASP.NET منتشر شده است را در 11 قدم مرور کردیم. در صورتیکه قسمتی از این مطلب نیاز به توضیح بیشتر دارد در قسمت نظرات مطرح کنید.دریافت وب سایت نمونهفایل ضمیمه شده حاوی وب سایتی است که در طی مراحل این مقاله برای استفاده از این ادیتور تنظیم کردیم. برای استفاده از آن، فایل فشرده شده را باز کرده و با اجرای Visual Studio و انتخاب File > Open > Web Site و یا ترکیب کلیدی Shift + Alt + O به یک سایت پیکربندی شده و آماده برای استفاده از ادیتور FCKeditor دسترسی خواهید داشت.دریافت نمونه وب سایت این پست https://royagar.com/notes/36-12-1/بکارگیری-fckeditor-در-aspnet آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 15:10:30 +0330 https://virgool.io/@royagar/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D8%A7-%D9%84%D8%B0%D8%AA-%D8%B4%D8%A7%D8%AF%D9%85%D8%A7%D9%86%DB%8C-%D9%88-%D8%B1%D8%A7%D8%AD%D8%AA%DB%8C-%DA%A9%D8%A7%D8%B1-%DA%A9%D9%86%DB%8C%D9%85-jzstkqy7wchj بر خلاف همیشه که درباره تئوری، تکنیکهای عملی، قواعد و استانداردها صحبت کرده ام، این بار به نحوۀ صحیح انجام یک کار و کیفیت درونی شروع و اتمام آن پرداخته ام. درک نکات اشاره شده به شما کمک خواهد کرد تا از کاری که در حال انجام آن هستید بدون توجه به شرایط بیرونی، لذت ببرید. شرایط درونی شما هنگام کار، در بالا رفتن کیفیت خروجی های شما تاثیر بسزایی خواهد داشت.از کار کردن لذت ببرید!همه ما می دانیم که افراد موفق اهداف خودشان را مشخص کرده و آنرا به مراحل عملی قابل اجرا تقسیم می کنند. احتمالاً شما هم با شروع یک کار که می تواند به نوبه خود بخشی از مسیری طولانی تر برای رسیدن به هدفی در آینده باشد، احساس بار سنگینی از مسئولیت در درونتان دارید و به کاری که در حال انجام آن هستید مانند مانعی بین شما و قدم بعدی یا هدف نهایی نگاه می کنید. برای اینکه بدانید احساس شما هنگام اجرای یک کار چگونه است از این محک ساده استفاده کنید:از خود بپرسید:آیا در کاری که انجام می دهم، احساس شادمانی، راحتی و سبکی می کنم؟اگر چنین احساسی ندارید، زندگی در آن لحظه برای شما مانند بار یا کشمکشی به نظر خواهد رسید. اگر در کاری که می کنید احساس راحتی، شادمانی و سبکی وجود ندارد، الزاماً به این معنی نیست که به تغییر آن کار نیاز دارید. ممکن است کافی باشد که چگونگی انجام آنرا تغییر دهید. همیشه چگونه مهمتر از چه است. ببینید آیا می توانید به جای نتیجهای که می خواهید از آن کار به دست آورید، بیشتر به انجام دادن آن توجه کنید؟هر چقدر هم کارهایی که انجام می دهید برای شما تکراری و عادی باشند، با توجه به چگونگی انجام آن کار، به آن به عنوان مانعی بین شرایط فعلی شما، که به نظرتان ناقص است و تصویری از آینده، که خود را در کمال مطلوب تصور می کنید، نگاه نخواهید کرد و با درک و حضوری که این نوع توجه به لحظه به بار می آورد دربهای خلاقیت و ایده های جدید را به روی خودتان می گشایید. مثال ساده ای که می توان برای درک بهتر این مطلب به آن اشاره کرد این است که برای رسیدن به مکانی دور، به مقصد تمرکز نکنید بلکه از گلهای کنار جاده لذت ببرید.عمل متبرکنگران حاصل کارتان نباشید و تنها به خود عمل توجه کنید. نتیجه به خودی خود حاصل می شود. در بسیاری از تعالیم معنوی این وابستگی نداشتن به نتیجه کار را، راه عمل متبرک توصیف کرده اند.همینکه به کار با قلبی سپاسگذار و به عنوان فرصتی برای بهتر شدن و ساختن آینده ای موفق نگاه کردید و به خود و تواناییهایی که دارید تمرکز کردید، حضور شادمانی، آرامش و سکون را احساس خواهید کرد. دیگر با نگرانی برای جلب نظر کارفرما تلاش نمی کنید. نه شکست و نه پیروزی هیچ کدام لذتی که از انجام کار می برید را تحت شعاع قرار نخواهند داد و نمی خواهید توانایی های خود را به کسی ثابت کنید.برای لذت از کار، با مشکلات نجنگیدطبیعی است که همیشه شرایط وفق مراد ما نیست و درست هنگامیکه تصمیم به تغییر کیفیِ عملی در زندگی می گیرید، عوامل دست به دست هم می دهند تا از لذت بردن شما از کار جلوگیری کنند. در این شرایط، به هیچ وجه با آن لحظه نجنگید و کاملاً آنرا قبول کنید. زیرا شما نمی توانید همزمان با آن لحظه جنگیده و از طرفی انتظار لذت بردن از آن را داشته باشید. به عنوان مثال اگر در شرایطی هستید که ایده ای به ذهنتان خطور نمی کند، با جنگیدن با شرایط و تحت فشار قراردادن خود نتیجه ای نخواهید گرفت و همانطوریکه می دانید ایده های تازه، زمانی که از جستجو و تلاش دست برداشته اید به ذهنتان خطور می کند.پس همه شرایط را بپذیرید. اینکه چه کاری انجام می دهید، رییس شما چه خصوصیاتی دارد، محل کار شما چطور است، ابزار های کار شما چگونه هستند، با هیچ کم و کاستی ای نجنگید، همه را قبول کنید و خودتان را با شرایط وفق دهید و بدانید که هیچ شرایطی برای همیشه پایدار نیست.وقتی تسلیم شرایط فعلی بودید، تمام مرارت ها و کشمکش ها برطرف می شوند و ایده های نو با شادمانی و راحتی شروع به سیلان می کنند. هنگامیکه بدین طریق کار می کنید، هر چیز که خلق می کنید سرشار از احساس ارزشمندی، عشق و توجه می شود و دیگران هم با مشاهده نتیجه کار شما به این کیفیت درونی کارتان پی خواهند برد.Ralph Waldo Emersonهیچ کار عظیمی نبوده که بدون شور و ذوق و اشتیاق انجام شده باشد. https://royagar.com/notes/45-16-1/چگونه-با-لذت-شادمانی-و-راحتی-کار-کنیم آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 13:01:18 +0330 https://virgool.io/@royagar/%DA%86%D8%B1%D8%A7-%D8%A8%DB%8C%D9%84-%DA%AF%DB%8C%D8%AA%D8%B3-%D9%85%D9%88%D9%81%D9%82-%D8%B4%D8%AF-dhzqgncz6rdm درباره موفقیت های بیل گیتس و سبک کاری ویژه او کتابها و مقالات مختلفی نوشته شده است. مقاله زیر هم نیم نگاهی به 9 ویژگی سبک کاری او انداخته است تا شاید توجیهی برای این همه موفقیت این کارآفرین برجسته پیدا کند.1. در مکان مناسب و زمان درست دست به کار بزنگیتس اهمیت معامله IBM را تشخیص داد. او می دانست که آن معامله می تواند تاریخ کاربرد کامپیوتر شخصی را دگرگون کند و او بیش از شش ماه بطور خستگی ناپذیری کار کرد تا شانس موفق بودن را به حداکثر برساند.2. عاشق فناوری باشیکی از مهمترین جنبه های موفقیت مداوم مایکروسافت دانش و آگاهی فنی بیل گیتس بوده است.3. هیچ کس را زندانی خود مکنگیتس رقیب سرسختی است. هر کاری که کرده برنده شده. به عنوان یک معامله گر، این کار او را یک مذاکره کننده فوق العاده انعطاف ناپذیر می سازد.4. افراد خیلی باهوش را استخدام کنگیتس همیشه اصرار داشته که شرکت به بهترین ذهن ها نیاز دارد. در برخی جاها این کار به عنوان نخبه گرایی محسوب شده و انتقاد هایی را برانگیخته ولی اثرات مثبتی داشته است.5. رمز بقا را فراگیرگیتس به راحتی می پذیرد که رقبایش بیشتر نبردهای بازرگانی را بخاطر اشتباهات خودشان باخته اند. آنچه او به ویژه در آن مهارت دارد فرار از دام هایی است که دیگران در آن می افتند.6. جایگاه برتر را برگزیندرک عمیق او از فناوری به عنوان یک شیوه منحصر به فرد از ترکیب کردن داده ها به او توانایی ویژه ای داده که روند های آتی را دریابند و استراتژی مایکروسافت را هدایت و راهنمایی کند. این کار نیز مایه شگفتی در بین طرفداران مایکروسافت و مرعوب شدن رقبای آن شده است.7. همه پایگاه ها را تحت پوشش قرار بدهعنصر مهم و کلیدی موفقیت مایکروسافت همانا توانایی آن در اداره و کنترل چند پروژه بزرگ به طور همزمان است. گیتس یک فرد چندکاره است و گفته می شود که قادر به انجام چند گفتگوی فنی بطور همزمان است.8. یک کسب و کار جمع و جور را تدارک ببینگیتس به حفظ یک ساختار ساده اعتقاد دارد تا او را قادر به حفظ کنترل شرکت کند. هر موقع احساس کند که خطوط ارتباطی در حال کشش یا نامشخص است او در ساده کردن ساختار تردیدی به خود راه نمی دهد.9. همیشه مواظب کارهایت باشاکنون بیش از دو دهه است که گیتس در بالای سر کار و حرفه خود است. در این زمان او ثروتمندترین مرد جهان است که برای کسی که هنوز در اوایل دهه چهل سالگی خود قرار دارد بد نیست. با وجود ثروت هنگفت و موفقیت هایش هیچ نشانه ای از کم شدن فعالیت گیتس دیده نمی شود. او می گوید که با این "ترس پنهان" برانگیخته می شود که ممکن است کار بزرگ بعدی را از دست بدهد. او قصد تکرار اشتباهات سایر شرکتهای مسلط کامپیوتری نظیر IBM و Apple را ندارد.منبع: مجله موفقیت / اینترنت https://royagar.com/notes/44-17-1/چرا-بیل-گیتس-موفق-شد آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 12:57:13 +0330 https://virgool.io/@royagar/%D9%86%D8%B4%D8%A7%D9%86%D9%87-%D9%87%D8%A7-%D8%A8%D8%AE%D8%B4-%D8%B3%D9%88%D9%85-%D8%B9%D9%84%D8%A7%D8%A6%D9%85-%D8%AA%D8%AC%D8%A7%D8%B1%DB%8C-%D8%A8%D8%A7%D8%B2%D8%B1%DA%AF%D8%A7%D9%86%DB%8C-trade-mark-%D9%88-%D8%A8%D8%B1%D9%86%D8%AF%D9%87%D8%A7-kwijyvpy69ft در بخش نخست این مجموعه مقالات، با نشان و انواع آن آشنا شدیم و در بخش دوم در مورد شیوه استاندارد طراحی و ارائه ی نشان مطالبی ارائه شد. در این بخش به یکی از پر کاربرد ترین و آشنا ترین انواع نشان؛ تریدمارک (که بصورت عامه به آن مارک) گفته می شود و قابلیت تبدیل شدن آن به برند خواهیم پرداخت.علائم تجاری و بازرگانی (Trade Mark)به نشان های تجاری و بازرگانی Trade Mark گفته می شود، این نشان معمولا ثبت می شود و یک نوع دارایی شخصی است که به دارندگان اطمینان می دهد که هیچ کس حق استفاده از آن را ندارد.ویژگی های یک نشان تجاری خوبدر طراحی یک نشان تجاری علاوه بر اینکه باید کلیه ویژگی های استانداردی که قبلا برای طراحی نشان ها به آن اشاره شد رعایت شود باید به نکات زیر هم توجه کرد.به صورت قانونی قابل حمایت باشدبه آسانی تلفظ شودبه آسانی به خاطر سپرده شودبه آسانی قابل تشخیص باشدتوجه را جلب کندمزیت ها و استفاده های محصول را بیان کندشرکت یا محصول را به خوبی معرفی کندموقعیت مرتبط با محصول قابل رقابت را مشخص کندباید توجه داشت در درجه نخست، نشان تجاری یک تعهد است و می گوید که شما آن نام را می شناسید و به تعهد آن اعتماد دارید. اعتماد گامی حیاتی و مهم است که هدف نشان تجاری شتاب دادن به این گام، با وسیله نفوذ قراردادن تعهد ضمنی نشان تجاری است.اغلب نشان های تجاری یک المان (علامت) ویژه دارند که به عنوان یک میانبر برای به یادآوری تعهد نشان تجاری عمل می کند. این المانها از رنگ، شکل، حروف و تصاویر برای خلق یک تصویر متمایز استفاده می کند که هم برای جلب چشم ما و هم برای هدایت نظر ما در مسیری که می خواهد طراحی شده است. نشان تجاری ممکن است با آهنگ، شعار و عبارات گیرا همراه باشد.همچنین یکی از مهم ترین عناصر بازاریابی و موفقیت یک سازمان نشان تجاری آن سازمان می باشد و در واقع تصویری است که سازمان یا شرکت را با همه ابعادش معرفی می کند و یا تصویری از آنچه که هست یا می خواهد باشد را در ذهن بیننده، مشتریان، مصرف کنندگان و ... ایجاد می کند و شرکت یا سازمان را از رقبا متمایز می کند و همچنین معرف کالاها و خدمات ایجاد شده توسط شرکت می باشد.پیش تر به انواع نشان ها اشاره کرده بودیم قابل ذکر است که در صورتی که این نشان ها با هدف تجاری و بازرگانی طراحی شود در حوزه ترید مارک هم قرار می گیرند، به عنوان مثال لگوی شرکت کوکا کولا یا لگو و آرم شرکت ادیدآس و یا مونوگرام شرکت دلس گابانا (دی اند جی) و یا سمبل ورساک .برند (Brand)به هویت یه نشان برند می گویند. بی شک هدف و آرزوی اغلب شرکت ها و موئسسات بازرگانی و تجاری و تولیدی مطرح شدن مارک و نامشان به عنوان یک برند است.عوامل بسیاری در مطرح شدن یک برند نقش ایفا می کنند بی شک یکی از مهمترین این عوامل نشان و یا نماد گرافیکی آن برند است، طراحان گرافیک نقش بسیار مهمی در ارائه یک برند ایفا می کنند، از طراحی نشان گرفته تا بسته بندی و نوع ارائه محصول. بنابر این نمادها و المانهای گرافیکی در ایفا و ارائه یک برند، نقش مهم و منحصر به فردی را دارا می باشند. اما باید توجه داشت که برند صرفاً یک نام و نماد گرافیکی نیست. عناصر بسیار مهم دیگری هم در مفهوم برند ایفای نقش می کنند. عناصری همچون کیفیت، افراد مصرف کننده، مراکز فروش ، تبلیغات ، تجربیات و...بنابراین برند دارای ماهیتی اجتماعی است و قابلیت هویت سازی برای خود در جوامع را دارا می باشد و نقش مردم در حیات بخشیدن به آن غیر قابل تصور است، به نوعی که مردم گاهی نسبت به آن حس مالکیت پیدا می کنند و می گویند این برند محبوب من است و بیشتر سازمانها نماد و یا نشان خود را با هدف ارزش آفرینی برای خود و یا محصولات خود مورد استفاد قرار می دهند.و در پایاندر بخش بعدی و پایانی نشانه ها به سوالات مطرح طراحان گرافیک بخصوص کسانی که به تازگی وارد حیطه طراحی شده اند شامل نحوه بستن قرار داد، شیوه ثبت نشان و معافیت مالیاتی خواهیم پرداخت.نویسندهحامد اشکانی، دانش آموخته کارشناسی ارتباط تصویری (گرافیک) دانشگاه انقلاب اسلامی تهران و رتبه 9 کنکور در رشته گرافیک است. او در حال حاضر به عنوان طراح گرافیک و ناظر چاپ شرکت نگارین برگ مشغول به فعالیت در زمینه گرافیک برای چاپ است. https://royagar.com/notes/59-11-1/نشانه-ها-بخش-سوم-علائم-تجاری-بازرگانی-trade-mark-و-برندها آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 12:53:15 +0330 https://virgool.io/@royagar/%D9%86%D8%B4%D8%A7%D9%86%D9%87-%D9%87%D8%A7-%D8%A8%D8%AE%D8%B4-%D8%AF%D9%88%D9%85-%D8%B4%DB%8C%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%D8%A7%D8%B1%D8%A7%D8%A6%D9%87-%D9%84%D9%88%DA%AF%D9%88-ygq9t7ofzanw طرحی که برای این مطلب انتخاب کرده ام نشانه ای است که چند سال پیش سفارش طراحی آن داده شده بود و از آن به عنوان مثالی برای پرداختن به مراحل استاندارد طراحی و ارائه یک نشان استفاده خواهم کرد.1. جمع آوری مشخصات سفارشمعمولاً مشخصات و اطلاعات لازم طی یک یا چند جلسه با متقاضی جمع آوری می شود. در این جلسه با مطرح کردن سوالات ساده در مورد هدف کارفرما و مواردی که برای وی مهم است اطلاعات کافی را کسب کنید و حتماً از نکات کلیدی یادداشت برداری کنید. مشخصاتی که در مورد مثال ما بدست آمد از این قرار بودند:نام نشانه: دوستان.موضوع: گروه موسیقی دوستان (استاد پرویز طاهری).موارد مطرح شده توسط متقاضی برای اعمال در نشانه: زیبا و خاص باشد، نشان دهنده موسیقی باشد، قابلیت تندیس شدن برای چسباندن و یا سنجاق شدن روی لباس های اعضای گروه را داشته باشد، کلمه دوستان در آن بکار برده شود.مواردی که توسط طراح باید در نظر گرفته می شد عبارت بودند از: جذابیت، تکراری نبودن، به روز بودن، قابلیت تبدیل به مهر و حجم، رابطه داشتن با موضوع.2. اتود زدن برای نشانهدر مرحله بعد شروع به جمع آوری المانهای موسیقی و سپس اتود زدن کلمه دوستان و تلفیق و بازی با آنها کردم؛ مسلماً در این مرحله قوه تفکر و قدرت تخیل بسیار مهم و با اهمیت است.مثلا من برای این نشان؛ از المان کلید سل و تلفیق آن با کلمه دوستان بهره بردم. سپس بعد از انتخاب چند اتود و مشورت با دوستان و تجزیه تحلیل طرح ها، دو نمونه را انتخاب و روی آنها شروع به کار کردم. باید اشاره کنم که بهتر است در مرحله ای که با دیگران مشورت می کنید از مشورت دو گروه بهره گیرید. اول گروهی که دید و سواد بصری خوبی دارند و گروه دوم افرادی که دید و سواد بصری آنها معمولی و در سطح افراد جامعه است. مسلماً مشورت با این افراد باعث خواهد شد که کار خود را قبل از ارائه هم از لحاظ حرفه ای بسنجید و هم از لحاظ عمومی.3. بحث و گفتگو با سفارش دهندهسپس از متقاضی دعوت نمودم و اتودها را نمایش دادم. این مرحله هم بسیار مهم است ما باید توجه داشته باشیم که اغلب متقاضیا ن از دید و سواد بصری متوسطی برخوردار هستند، پس باید در این مرحله درباره ویژگی ها، خصوصیات و المانهایی که برای طراحی نشان به کار بردیم صحبت نموده و فرد مخاطب را کاملاً متقاعد نماییم. این دیگر به تبحر و تجربه یک طراح باز می گردد که چگونه کار خود را ارائه دهد.4. اجرای نهاییپس از تایید یک طرح به مرحله اجرای فاینال می رسیم. در این مرحله باید طرح اتود خود را بر یک پایه استاندارد طراحی نموده و ایرادات جزئی آن را رفع و برای آن یک شناسنامه تعریف نمایید.مراحل طراحی شناسنامه برای نشانهجهت استاندارد نمودن طرح اولیه، آنرا در یک صفحه مشبک رسم می نماییم. اندازه هر خانه از این صفحه را یک میلیمتر در نظر می گیریم.سپس خط کرسی و خطوط فرعی و پایه را ترسیم می نماییم. این صفحه اصلی بیس کار ما می باشد. یک طراح با در اختیار داشتن این صفحه در هر زمان و مکانی می تواند همان چیزی را که ما خلق نموده ایم مجدداً طراحی نماید.در این مرحله یک کپی از تصویر شماره 2 گرفته، خطوط راهنما را حذف و آنرا رنگ آمیزی می کنیم. سپس کد رنگ و یا رنگ ها را بر اساس سیستم RGB ,CMYK و سیستم CMYK PROCESS که سیستمی برای چاپ است ارائه می دهیم. با ارائه این صفحه، هر چاپخانه ای در هر کجای دنیا می تواند نشان ما را با یک رنگ خاص تعریف شده چاپ نماید.و در نهایت لگو را سیاه و سفید کرده تا نشان دهیم که در حالت تبدیل به مهر به چه شکلی در خواهد آمد. طراح علاوه بر این صفحات می تواند صفحات دیگری به شناسنامه خود اضافه کند. مانند صفحه توضیحات درباره نشان و المان های به کار رفته در آن و...و در پایاندر پست بعدی مطالبی در مورد برند و جایگاه یک نشانه تصویری در این دوران ارائه خواهد شد.نویسندهحامد اشکانی، دانش آموخته کارشناسی ارتباط تصویری (گرافیک) دانشگاه انقلاب اسلامی تهران و رتبه 9 کنکور در رشته گرافیک است. او در حال حاضر به عنوان طراح گرافیک و ناظر چاپ شرکت نگارین برگ مشغول به فعالیت در زمینه گرافیک برای چاپ است. https://royagar.com/notes/43-11-1/نشانه-ها-بخش-دوم-شیوه-استاندارد-طراحی-و-ارائه-لوگو آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 12:48:33 +0330 https://virgool.io/@royagar/%D9%86%D8%B4%D8%A7%D9%86%D9%87-%D9%87%D8%A7-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-%D9%85%D9%82%D8%AF%D9%85%D9%87-%D8%A7%DB%8C-%D8%A8%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%84%D9%88%DA%AF%D9%88-v68vpcplbaxe استاد عبدالرضا چارئیهویت فردی و گروهی اشخاص و سازمان ها به لحاظ نوع فعالیت که رمز گونه نمایش داه می شود نشان نام دارد.نشانه ها، زیر مجموعه ای از دنیای گرافیکبا انقلاب های صنعتی در اروپا و صنعتی شدن سریع جوامع و گسترش فعالیتهای مردم و کلانشهر ها، ضرورت بوجود آمدن آرم و نشان بیش از بیش برای شرکت ها و تجار احساس شد. هر چند قبل از آن در پاره ای از اصناف از سنبل یا نمادها به صورت صنفی مثلاً نماد کلید برای کلید سازی ها استفاده می شد.در ابتدا، تجار و بازرگانان از امضا یا تصویر خود و یا حیوان یا میوه مورد نظر خود استفاده می کردند. کم کم دیگر نشان ها نماینده شرکتها، نهادها و ... شدند و به مرور زمان گسترش پیدا کرده و به انواع گوناگون تقسیم شدند.نشانه ویژ گی های یک محصول یا مؤسسه را نشان می دهد. هر نشان و فرمی باید دارای مفهوم و محتوا باشد. علاوه بر آن، یک طراح باید به دانش روز آگاه باشد. همینطور یک نشانه باید خاص بوده و از نشان های دیگر مؤسسات جدا باشد. علاوه بر جذابیت و دیدنی بودن، یک نشان خوب باید ساده و گویا باشد تا سریع در ذهن نقش ببندد.مراحلی که در طراحی یک نشانه باید مورد توجه قرار گیرندتفکر: دوری از ابزار زدگی و اجراهای ناشیانه، بهره گیری درست از ابزار بعد از تفکر و اتود برای اجرای دقیقتر و سرعت در اجرا.اتود: بعد از تفکر و با توجه به موضوع، مخاطب و نوع کاربرد، با کنار هم چیدن اجزا، اِلمان ها، رنگ، فرم، و ... شروع به اتود زدن می کنیم.بحث و گفتگو با سفارش دهنده: آموزش و آگاهی برای سفارش دهندگانی که سواد بصری و یا آگاهی کاملی ندارند.اجرا: پس از تجزیه تحلیل و انتخاب چند اتود نوبت به اجرا می رسد.شناسنامه: پس از تایید طرح نهایی یعنی نسخه فاینال، نوبت به طراحی شناسنامه برای نشانه می رسد.طراحی شناسنامه برای نشانه و اهمیت آنشناسنامه طرح، علاوه برنام طراح، سال طراحی، نام شرکت و یا سفارش دهنده و موارد جزئی، باید شامل مطالبی در مورد خود طرح باشد:توضیحاتی درباره تاریخچه، سمبلها و یا هر چیزی که در طراحی نشان حاضر از آنها بهره گرفته شده است.توضیحاتی در مورد شیوه رسم طرح در یک اندازه استاندارد، مواردی شامل خطوط، ترام، رنگ ها و ترکیبات آنها و نکات خاص دیگر.هر چند در کشور ما عده ای به آن توجه نمی کنند اما مورد دوم بسیار با اهمیت است. به عنوان مثالی برای نشان دادن اهمیت این قضیه، در بازیهای آسیایی در کشور کره جنوبی شاهد بودیم به دلیل ارائه ندادن شناسنامه رسم نشانه الله پرچم جمهوری اسلامی ایران به مسئولان بازیها، طراحان فوق برای طراحی نشان الله به جای استفاده از بیس هلال، از بیس دایره بهره گرفته بودند و نشان بسیار تغییر یافته بود.همینطور در بسیاری از موارد شاهد هستیم که طراحی دیگر از شرکت سفارش گرفته و به دلیل نداشتن شناسنامه آرم شرکت مربوطه، با دریافت تصویری از آرم قبلی شرکت و اسکن آن اقدام به طراحی مجدد می کند. در نتیجه بخاطر تغییرات ایجاد شده در اسکن و در طی مرحله اجرای مجدد، هنگامی که نشان مذکور در ابعاد بزرگ یا کوچک بکار می رود مشکلات کار مشهود می شود.خصوصیتهای یک آرم امروزیباید توجه داشت که این تعاریف همواره نسبی بوده و بر اثر مرور زمان با پیشرفت تکنولوژی و سطح اطلاع بشر همواره دستخوش تغییر هستند. مثلاً با توجه به نوع تکنولوژی در زمان حاضر، یک آرم علاوه بر موارد ذکر شده باید دارای قابلیتهای زیر باشد:قابلیت تبدیل به مهر.قابلیت تبدیل به حجم.قابلیت تبدیل به انمیشن (سه بعدی).چاپ در ابعاد بسیار کوچک و استفاده در ابعاد بسیار بزرگ.قابلیت بکارگیری چند رنگ در طرح.البته نشانه ای ایده آل است که تاریخ مصرف آن کوتاه مدت نباشد، یعنی آنچنان خوب و قوی طراحی شده باشد که در اثر مرور زمان نیازی به تغییر آن ایجاد نشود و حتی اگر نیاز به تغییری حس شد، به صورت Redesign (دوباره سازی طرح) باشد. به عبارتی دیگر پایه و سابقه طرح حفظ شده و فرم کلی مطابق نیاز روز تغییر کند. مانند آرم شرکت Shell که در زیر مشاهده می کنید:تقسیم بندی نشانه ها از دیدگاه مرتضی ممیزاستاد ممیز نشانه های تصویری را به چند بخش تقسیم کرده اند:نشانه هایی که با موضوع ارتباط مستقیم دارند، مثل تصویری از سر یک گاو برای محصولات لبنی.نشانه هایی که با موضوع ارتباطی غیر مستقیم و به صورت استعاره و کنایه یا تشبیه دارد، مثل تصویر شیر برای شرکت پژوی فرانسه که نشان از قدرت ، اقتدار دارد. همچنین این شیر ایستاده است و علاوه بر ایستایی و پابرجایی، به نوعی آماده مبارزه است و یا زبان استعاره بر این نکته اشاره دارد که علاوه بر سلطنت در دنیای ماشین، همواره استوار و آماده مبارزه است. هرچند در دنیای تولید اتومبیل ممکن است این گونه نباشد.انواع نشان ها (Signs)سمبل (Symbol): نشان، رمز، نماد، مربوط به فرهنگ و اعتقاد یک قوم و ملت است.نشان تجاری - صنعتی (Trade Mark) .علامتها و هویت های ملی میهنی (Emblem): مثل نشان پرچم یک ملت.آرم (Arm): نشان برای شرکت ها، مؤسسات، اماکن.لوگو (Logo Type): لوگو یک آرم نیست. لگو حتما باید خوانده شود، کلمه باید کامل طراحی شود.مونوگرام (Monogram) یا نشان های حرفی: هنگامیکه از حرف اول نام و یا فامیل به صورت همزمان یا مجزا برای طراحی نشان استفاده شود.پیکتوگرام (Pictogram): نشان های تصویری به صورت ست (گروه)، جزو مقوله اطلاع رسانی است. گرام از نمودار آمده و پیکتو از تصویر. در طراحی پیکتو گرام ابتدا باید مخاطبین مشخص شوند. به عنوان مثال طراحی پیکتوگرامی که در خیابان کاربرد دارد باید برای بزرگ و کوچک، باسواد و بی سواد قابل درک باشد.نشانه های صوتی (Signal): مانند نشانه صوتی تلفن همراه نوکیا.نشانه ها نوری: مثل چراغ های راهنمایی و رانندگی.انواع آرمآرم تصویری: دید در طبیعت دارد.آرم نوشتاری: از مجموع چند کلمه و حرف تشکیل می شود.آرم تلفیقی: در نوشته از یک تصویر هم استفاده می شود.آرم انتزاعی: برگرفته از طبیعت است و مفهومی می باشد. یعنی ارتباط مستقیم و غیر مستقیم با موضوع ندارد و مفهومی می باشد. می تواند هندسی یا آزاد باشند.برندبه هویت یک آرم ونشانه برند می گویند.و در پایاندر پایان شایان ذکر است که همواره در هنر مهمترین اصل و عنصر تخیل است و یک هنرجو و یا هنرمند نباید به هیچ وجه خود را محدود کند و همیشه در یک چهار چوب قدم بردارد. ولی آین بدان معنا نیست که به اصول اولیه پایبند نباشد.این مقاله، علاوه بر تجربیات هنرمند برداشتی بود آزاد از سخنان اساتید محترم: مرتضی ممیز، ابراهیم حقیقی، مسعود سپهر، عبدالرضا چارئی، مسعود نجابتی، مهران رجبی، مهدی صادقی، محمود ارواحی آذر، پرویز سلیمانی، مهرنیا، فرخ محجوبی و نادی.نویسندهحامد اشکانی، دانش آموخته کارشناسی ارتباط تصویری (گرافیک) دانشگاه انقلاب اسلامی تهران و رتبه 9 کنکور در رشته گرافیک است. او در حال حاضر به عنوان طراح گرافیک و ناظر چاپ شرکت نگارین برگ مشغول به فعالیت در زمینه گرافیک برای چاپ است. رطhttps://royagar.com/notes/42-11-1/نشانه-ها-بخش-اول-مقدمه-ای-بر-طراحی-لوگو آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 12:42:43 +0330 https://virgool.io/@royagar/%D9%86%DA%A9%D8%AA%D9%87-%D8%B1%D9%88%D8%B2-%D8%B1%D9%88%DB%8C%D8%A7%DA%AF%D8%B1-%D8%B1%D8%A7-%D8%A8%D9%87-%D8%B3%D8%A7%DB%8C%D8%AA-%DB%8C%D8%A7-%D9%88%D8%A8%D9%84%D8%A7%DA%AF-%D8%AE%D9%88%D8%AF-%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D9%86%DB%8C%D8%AF-qcw2lmjjmh3v نکته روز، بخشی از سایت رویاگر است که در آن هر روز نکته ای کوتاه و جدید در مورد طراحی همراه با تاریخ جاری آن روز را مشاهده خواهید کرد. در حال حاضر قسمت اعظم آن تشکیل شده از نقل قول های جالبی از شخصیتهای مطرح در ضمینه طراحی که با توجه به Feedback خوانندگان، در حال جایگزینی آنها با نکات مهم در طراحی و دسترسی پذیری هستم.طریقه استفاده از رابط برنامه کاربردی (API) نکته روزدر صورتیکه نکات روز رویاگر را جالب یافتید، با استفاده از API ساده ای که برای دسترسی به آن فراهم کرده ام می توانید آنرا به آسانی به وب سایت یا وبلاگ خود اضافه کنید. برای اینکار فقط نیاز دارید که این قطعه کد را در هر قسمتی که مایل هستید به نمایش درآید قرار دهید:<div id=&quottip-edreamer&quot> بارگزاری کلام روز... </div> <script type=&quottext/javascript&quot src=&quothttp://www.edreamer.ir/api/tip-1.aspx&quot> و نتیجه چیزی شبیه این خواهد بود:<div id=&quottip-edreamer&quot> <span id=&quottip-date&quot>تاریخ روز جاری</span> <p id=&quottip-text&quot>متن نکته روز</p> </div>هر قسمت با یک شناسه جداگانه مشخص شده تا شما کنترل کاملی توسط CSS بر روی نحوه نمایش آن داشته باشید. به عنوان مثال در صورتیکه مایل به نمایش تارخ جاری نیستید با استفاده از استایل زیر، آنرا پنهان کنید و یا به همین روش می توانید اقدام به تنظیم بصری سایر قسمتها نمایید.#tip-edreamer span#tip-date { display:none; }روشهای دیگر دسترسی به نکته روزاگر تا بحال سایت رویاگر را بررسی کرده باشید، با نحوه دسترسی و مطلع شدن از محتویات تازه آن آشنا شده اید. تمام محتویات پویای سایت با استفاده از Websliceها (برای Internet Explorer 8.0 به بالا)، RSSها و عضویت در خبرنامه سایت قابل دسترسی است.حتی برای دوستانی که امکان مطالعه مطالب بصورت Online را ندارند امکان دریافت کامل مطلب و مطالعه برای بعدها وجود دارد.نکته روز رویاگر نیز از این قائده مستثنی نیست. به غیر از استفاده از API که به آن اشاره شد، می توانید با عضویت در Webslice نکته روز و یا RSS آن، هر روز به نکته ای تازه دسترسی داشته باشید و یا آنرا در صفحه شخصی تان در سرویسهای Online مانند MyYahoo که امکان افزودن آدرس RSS را می دهند اضافه کنید.و در پایانهمانطوریکه در ابتدای این مطلب اشاره کردم در حال کار بر روی محتویات این بخش از رویاگر برای ارتقای کیفی آن هستم. از شما هم دعوت می کنم اگر نکات کوتاه و مفیدی درباره طراحی برای افزودن به این بخش دارید من را مطلع کنید. در صورت حمایت بازدیدکنندگان تصمیم به طراحی بخشهای دیگری برای امکان افزودن نکته روز توسط بینندگان را دارم. برای اطلاعات بیشتر و یا مطرح کردن پرسشهای احتمالی از فرم نظرات استفاده کنید. https://royagar.com/notes/41-12-1/نکته-روز-رویاگر-را-به-سایت-یا-وبلاگ-خود-اضافه-کنید آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 12:34:52 +0330 https://virgool.io/@royagar/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%85%D9%86%D9%88%D9%87%D8%A7%DB%8C-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%A8%D8%AF%D9%88%D9%86-%D9%86%DB%8C%D8%A7%D8%B2-%D8%A8%D9%87-%D9%81%D9%84%D8%B4-%D8%A8%D8%AE%D8%B4-%D8%AF%D9%88%D9%85-markup-%D9%88-css-fg1g9wxc9jpp در این مقاله دو قسمتی با ترکیب مواردی آشنا مانند CSS Sprites، Gif Transparency و Gif Animation بصورت قدم به قدم به طراحی یک منوی کاربری متحرک، بدون نیاز به استفاده از فلش و سازگار با تمام مرورگرهای قدیمی و جدید می پردازیم.در بخش اول این مقاله با تکنیکها و روشهای لازم برای ایجاد فایل تصویری متحرکِ مورد نیاز برای منوی کاربری، شامل آماده سازی فایلهای شفاف GIF برای انتشار روی وب، آشنایی با طریقه طراحی منابع مورد استفاده در CSS Sprite ها، ابزارها و روشهای متحرک سازی GIF در فتوشاپ و شبیه سازی شفافیت %50 فایلهای GIF آشنا شدیم. در این قسمت به طریقه نوشتن Markup و استایل های مورد نیاز و تکنیک CSS Sprite برای تکمیل منوی کاربری خواهیم پرداخت.بخش دوم: Markup و استایل دهی توسط CSS به عناصربعد از آماده سازی منابع تصویری مورد نیاز، حال زمان بکارگیری آنها در وب سایتمان است. در ادامه Markup معتبر منو را به صفحه خود افزوده و توسط CSS و بصورت مجزا با استفاده از منابعی که تا به اینجا آماده کرده ایم آنرا استایل دهی خواهیم کرد.Markup مورد نیاز برای طراحی منوی ناوبریمنوی ناوبری ما در حقیقت تشکیل شده از یک ul که در یک تگ div پیچیده شده است. این کد را در قسمت مناسبی از صفحه که برای منوی ناوبری اصلی در نظر گرفته اید اضافه کنید.<div id=&quotnavigation&quot> <h3>Navigation Menu</h3> <ul> <li class=&quotselected&quot><a title=&quotHome Page&quot href=&quot#&quot>Home</a></li> <li><a title=&quotProducts Page&quot href=&quot#&quot>Products</a></li> <li><a title=&quotServices Page&quot href=&quot#&quot>Services</a></li> <li><a title=&quotAbout Us Page&quot href=&quot#&quot>About Us</a></li> <li><a title=&quotContact Us Page&quot href=&quot#&quot>Contact Us</a></li> </ul> </div>برای استایل دهی به همه این موارد دادن شناسه navigation به تگ div اکتفا می کند. اما نقش کلاس selected چیست؟ همانطوریکه می دانید یکی از مهمترین خصوصیات یک منوی ناوبری خوب نمایش صفحه جاری به کاربر است. بنابراین با دادن کلاس selected به li مناسب، کاربر را از صفحه جاری مطلع خواهیم کرد. شاید از خود بپرسید ما در هر صفحه جاری فقط یک لینک فعال داریم و در این شرایط استفاده از id بهتر از class است. اما علت استفاده از class بجای id این است که برای مشخص کردن صفحه جاری در پروژه های پویا، نیاز به دسترسی به عنصر li به صورت داینامیک دارید، بنابراین مثلاً با "runat="server کردن آن، مقدار id استفاده خواهد شد و دیگر مناسب استایل دهی نخواهد بود. بنابراین بکارگیری class انتخاب دیگر شماست.استایل دهی به عناصر سازنده منوی کاربریحال قدم به قدم به تعریف استایلهای مورد نیاز منوی کاربری خود می پردازیم.#navigation { width: 170px; margin: 100px auto; padding: 20px; font-size: 1.1em; background:#6699cc url('../images/nav-bg.gif') no-repeat scroll right bottom; }تگ div با شناسه navigation محل قرارگیری ul مورد نیاز برای منوی کاربری است. در این بخش علاوه بر تنظیمات کلی مانند width و margin، توسط background از فایلی که به عنوان پس زمینه طراحی کرده ایم استفاده می کنیم. در قسمت بعدی بیشتر با خصوصیت background آشنا خواهید شد. مقدار auto در خاصیت margin باعث می گردد که خود مرورگر اقدام به محاسبه محل قرارگیری عنصر در صفحه نماید. در نتیجه منوی ما از بالا و پایین 100 پیکسل فاصله خواهد داشت و دقیقاً در وسط صفحه قرار خواهد گرفت.#navigation ul { list-style: none; margin: 2px 0 0 0; padding: 0; }با استفاده از مقدار none برای list-style بولت هایی که کنار هر list item وجود دارند را حذف می کنیم. همانطوریکه در بخش اول این مقاله متوجه شدید دکمه ها از هم به مقدار 2 پیکسل فاصله دارند. بنابراین به ul مقدار 2 پیکسل حاشیه از بالا برای هماهنگی بصری اولین دکمه با بقیه دکمه ها داده شده است. تعیین بقیه مقادیر نیز برای یکسان سازی نمایش در مرورگرهای مختلف است.#navigation ul li a { display:block; height: 22px; text-decoration: none; padding: 5px 20px 0 20px; color:#fff; background: transparent url('../images/menu.gif') no-repeat scroll left 0; }در این قسمت به فرم دهی لینکها پرداخته ایم. همانطوریکه می دانید عنصر a یک عنصر inline level است. بنابراین برای دادن طول و عرض خاصیت display آنرا از نوع block level تعیین می کنیم. مطابق آنچه که گفته شد ارتفاء هر لینک 27 پیکسل است اما بخاطر قرارگیری متن لینک در وسط آن از 5 پیکسل padding استفاده کرده ایم بنابراین توسط height ارتفاء آنرا 22 پیکسل تعیین می کنیم.نمونه ای از کاربرد CSS Sprite هادر این قسمت به عنوان تصویر پس زمینه لینک ها در حالت normal فایل سه قسمتی که قبلاً طراحی کردیم را بکار برده ایم. آخرین مقادیر مشخص شده در خصوصیت background مشخص کننده محل آغازین قرارگیری تصویر بصورت افقی و عمودی در پس زمینه می باشد. در مثال ما برای مرورگر مشخص کرده ایم که مایل هستیم تصویر بصورت افقی در سمت چپ و عمودی در بالاترین حد ممکن قرار بگیرد (left 0). در نتیجه از قسمت بالا و چپ تصویر به عنوان پس زمینه استفاده خواهد شد. از همین روش برای استفاده از تکنیک CSS Sprite استفاده می شود. این بدین معنی است که می توان به جای قرار دادن تصاویر مورد نیاز سایت در فایلهای مجزا همه آنها را در یک یا چند فایل مرتبط قرار داد و در هنگام مشخص کردن تصویر مورد نیاز به یک فایل اشاره کرده، با تنظیم background-position آن محدوده مورد نیاز را مشخص کرد.به عنوان توضیح بیشتر، به فایلی که برای پس زمینه آماده کردیم نگاه کنید. از پیکسل 0 تا 27- به عنوان پس زمینه لینکها در حالت normal ، از پیکسل 27- تا 54- به عنوان حالت hover و از ابتدای پیکسل 54- تا انتها به عنوان حالت selected استفاده خواهد شد. همانطوریکه در بخشهای بعدی می بینید این مقادیر بطور دقیق به عنوان مقادیر background-position مشخص خواهند شد.#navigation ul li a:hover, #navigation ul li a:focus, #navigation ul li a:active { color: #334c66; font-weight:bold; background: transparent url('../images/menu.gif') no-repeat scroll left -27px; }در این قسمت نحوه نمایش لینکی که اشاره گر ماوس روی آن قرار می گیرد را مشخص می کنیم (حالت hover). همانطوریکه توضیح داده شد تصویر پس زمینه لینک همان تصویر قبلی منتهی با نقطه شروع 27- خواهد بود.نکته مهم دسترسی پذیرییکی از نکات بسیار مهم که نباید فراموش شود این است که همه کاربران برای مرور سایت شما توانایی استفاده از ماوس را ندارند. بنابراین برای دادن Feedback مناسب به کاربر که سایت شما را با صفحه کلید پیمایش می کند، حتماً برای تمام شبه کلاسهای hover، focus و active مربوط به تمام لینکهای سایت خود استایل تعریف کنید.#navigation ul li.selected a { color: white; font-weight:bold; background: transparent url('../images/menu.gif') no-repeat scroll left -54px; }آخرین قسمت مورد نیاز برای تعریف در بخش استایل دهی به عناصر، مشخص کردن نحوه نمایش لینک صفحه جاری است. همانطوریکه توضیح داده شد لینک جای گرفته در تگ li با کلاس selected نمایانگر لینک صفحه جاری خواهد بود. در این قسمت نیز با استفاده از همان تصویر قبلی ولی با نقطه شروع 54- تعریف شده است.<head> ... <link href=&quotStyleSheets/Styles.css&quot rel=&quotstylesheet&quot type=&quottext/css&quot/> ... </head>استایلهای مشخص شده را در یک فایل CSS خارجی قرار داده و با لینک دادن به آن در صفحه Markup طراحی منوی متحرک را به پایان برسانید.نتیجه گیریاین پست، قسمت آخر مقاله دو قسمتی طراحی منوهای متحرک بدون نیاز به فلش بود. در این مطلب بعد از آماده کردن منابع تصویری در بخش قبلی، بصورت قدم به قدم به ایجاد Markup و استایل دهی به آن همراه با اشاره به توضیحات و نکات لازم مانند تکنیک CSS Sprite پرداختیم.در صورتیکه بعد از مطالعه این دو بخش با ابزارها و تکنیکهای معرفی شده آشنا شده باشید توانایی طراحی منوهای متحرک و جذاب را بدون استفاده از عناصر فلش خواهید داشت. پیشنهاد می کنم اگر با این روش منوی متحرکی را برای سایت خود طراحی کردید با دادن لینک آن در قسمت نظرات دیگر خوانندگان این مطلب را نیز از طراحی جدید خود مطلع کنید. در این بخش نیز اگر مطلبی نیاز به توضیح بیشتری داشت در قسمت نظرات مطرح کنید.دریافت فایل منبع این پستاز طریق لینک زیر می توانید تصاویر، استایل و صفحه HTML حاوی Markup این پست را دریافت کنید.فایلهای منبع منوی متحرک https://royagar.com/notes/40-12-1/طراحی-منوهای-متحرک-بدون-نیاز-به-فلش-بخش-دوم-markup-و-css آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 09:05:13 +0330 https://virgool.io/@royagar/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%85%D9%86%D9%88%D9%87%D8%A7%DB%8C-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%A8%D8%AF%D9%88%D9%86-%D9%86%DB%8C%D8%A7%D8%B2-%D8%A8%D9%87-%D9%81%D9%84%D8%B4-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-%D8%AA%D9%87%DB%8C%D9%87-%D9%85%D9%86%D8%A7%D8%A8%D8%B9-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%DB%8C-iykiqjlmoot3 همیشه با کمی خلاقیت و توجه به امکانات موجود اطرافمان می توانیم به طرحهای جالبی برسیم. نظر شما در مورد فرمت GIF چیست؟ این فرمت که یار قدیمی طراحان وب از سالهای اولیه پیدایش صنعت طراحی وب بوده، با آمدن فرمتهای دیگر مانند PNG با خصوصیات پیشرفته مانند 256 پله شفافیت رو به فراموشی می رود. اما این همراه پیر شاید هنوز شعبده هایی در آستین داشته باشد. یکی از این موارد امکان متحرک سازی فایلهای GIF است.در این مقاله دو قسمتی با ترکیب مواردی آشنا مانند CSS Sprites، Gif Transparency و Gif Animation بصورت قدم به قدم به طراحی یک منوی کاربری متحرک، سازگار با تمام مرورگرهای قدیمی و جدید خواهیم پرداخت.بخش اول: طراحی منابع تصویری مورد نیازاولین عنصر بصری برای شروع طراحی منو، تصویر Watermark پس زمینه است. برای این کار برنامه فتوشاپ را اجرا کرده یک فایل جدید با ابعاد 210x210 پیکسل ایجاد کنید. در صورتیکه خط کش های سند نمایش داده نشده اند، با انتخاب View > Rulers یا ترکیب کلیدی Ctrl+R آنها را نمایش دهید. حال دو Guide افقی و عمودی از روی آنها به ترتیب به درون صفحه کشیده و نقطه مرکزی صفحه را با توجه به پرش Guide ها پیدا کنید.لوگوی سایت یا شرکت دارنده سایت می توانند پیشنهاد مناسبی به عنوان طرح گرافیکی پس زمینه منو باشد. در غیر اینصورت از طرح های آماده Custom Shape Tool یکی را انتخاب کنید و در قسمت پایین و سمت راست صفحه بکشید. از طریق پالت Layers مقدار Opacity آنرا بر روی %50 تنظیم کنید. با Double Click روی Layer thumbnail در پالت Layer رنگ سفید را برای آن انتخاب کنید.در نهایت برای داشتن پس زمینه شفاف لایه Background را با کشیدن آن روی آیکن Delete Layer در پایین پالت Layers حذف کنید.فشرده سازی تصویر برای انتشار روی وبحال با انتخاب گزینه Save for Web & Devices از منوی File یا ترکیب کلیدی Alt+Shift+Ctrl+S این تصویر را با فرمت GIF برای فشرده سازی آماده می کنیم. در این پنجره گزینه GIF را از منوی Optimized file format انتخاب کنید. چون در این تصویر از شفافیت استفاده کرده ایم برای داشتن لبه های نرم شکل پس ضمینه، در قسمت انتخاب رنگ Matte باید رنگی که قرار است در پس زمینه منو استفاده شود را مشخص کنیم. روی منوی انتخاب رنگ مات کلیک کرده و مقادیر R:102 G:153 B:204 را وارد و سپس فایل را ذخیره کنید. بدین ترتیب تصویر مورد نیاز پس زمینه منو را ایجاد کردید.طراحی تصویر مورد نیاز بکار رفته در CSS Spriteقدم بعدی طراحی تصویر مورد نیاز برای حالات سه گانه هر دکمه از منوی کاربری است. در صورتیکه عرض هر دکمه را 27 پیکسل در نظر بگیریم و با توجه به اینکه برای سه حالت normal، hover و selected نیاز به تصویر داریم، به فایلی با عرض 81 پیکسل نیاز خواهیم داشت. بنابراین یک فایل جدید با ابعاد 170x81 پیکسل ایجاد کنید.CSS Sprite هاتوضیح برای دوستانی که احتمالاً با CSS Sprite ها آشنا نیستند: در این روش و به عنوان مثال برای طراحی سه حالت دکمه های منوی کاربری، به جای طراحی 3 فایل مجزا، همه آنها را در یک فایل طراحی و فشرده سازی می کنیم. استفاده از CSS Sprite ها باعث کمتر شدن تعداد HTTP requests ها و در نتیجه سرعت بارگزاری بیشتر صفحه خواهد شد. در این قسمت به طراحی فایل منبع تصویری می پردازیم و در بخش بعدی این مقاله نحوه بکار گیری CSS Sprite ها را در CSS خواهید آموخت.طراحی حالات سه گانه یک دکمهابتدا با قرار دادن سه Guide افقی با فاصله 27 پیکسل نسبت به یکدیگر فایل خود را به سه بخش مساوی تقسیم کنید. برای طراحی حالت normal دکمه با انتخاب ابزار Rectangle Tool از پالت Tools یک مستطیل با ابعاد 170x25 پیکسل در قسمت بالا رسم کنید. چون برای جدا کردن دکمه های منو از همدیگر به 2 پیکسل فضا نیاز داریم اندازه دکمه ای که در این مرحله رسم می کنیم 2 پیکسل کوچکتر از 27 پیکسل عرض یک دکمه است. حال رنگ این دکمه را همانطوری که آموختید به R:115 G:172 B:229 تغییر دهید. برای شبیه سازی حالت Transparency در حالت normal، مقدار Opacity این شکل را روی %50 تنظیم کنید. برای زیبایی بیشتر می توانید از فرمهای دیگری برای هر دکمه استفاده کنید. در اینجا من از یک مربع 10x25 پیکسل به رنگ R:11 G:172 B:229 در سمت چپ استفاده کرده ام.فتوشاپ، کامل ترین ابزار تولید Gif Animationفتوشاپ ابزاری قدرتمند در تولید فایلهای متحرک با فرمت GIF است. این نرم افزار توانایی ایجاد Tween با لحاظ کردن پارامترهای مکان، شفافیت و اِفِکت را داراست. در صورت ترکیب خلاقانه این توانایی فتوشاپ با CSS Sprite ها، به تعداد بیشماری ترکیبات زیبا برای حالات مختلف دکمه ها که دست کمی از افکتهای Flash ندارند خواهیم رسید و می توانیم بدون نگرانی در مورد نصب نبودن Flash Plug in و غیر فعال شدن امکان حرکت در صفحات بدون این افزونه به سایتهایی متحرک و در عین حال استاندارد دست بیابیم.روشهای متحرک سازی در فتوشاپدر این مرحله تصمیم به طراحی یک انیمیشن ساده برای وقتی که اشاره گر بر روی یک دکمه قرار می گیرد داریم. اما قبل از شروع اجازه دهید مروری کوتاه بر روشهای متحرک سازی در فتوشاپ داشته باشیم.روش Frame به Frameدر طراحی کلاسیک انیمیشن از روش فریم به فریم استفاده می شود و این به این معنی است که طراح بطور کامل هر فریم را رسم کرده و از پشت سر هم قرار گرفتن فریم ها متحرک سازی صورت می گیرد. در فتوشاپ این به معنی تغییر خصوصیت لایه ها و عناصر در وضعیت فریم اول و بعد تکثیر آن فریم و تغییر مجدد خصوصیات برای رسیدن به فریم دوم می باشد. طبیعی است که این روشی کند برای ایجاد انیمیشن خواهد بود.روش Tweeningدر این روش طراح فقط اقدام به طراحیKey Frame ها کرده و فریمهای بینابین را خود فتوشاپ ایجاد خواهد کرد. این بدین معنی است که ما با تغییر خصوصیات لایه ها و عناصر بصری اقدام به ایجاد فریم های کلیدی برای انیمیشن می کنیم. در نهایت با انتخاب دو فریم کلیدی در پالت Animation و کلیک روی دکمه Tween اقدام به ایجاد فریم های میانی به تعداد دلخواه می کنیم.بخاطر سادگی انیمیشن بکار رفته روی دکمه منوی ناوبری در این مثال از روش فریم به فریم استفاده خواهیم کرد.بکارگیری Gif Animation در حالت hover دکمهبرای این کار با انتخاب لایه هایی که برای حالت normal طراحی کردیم و سپس انتخاب Layers > Duplicate Layers آنها را تکثیر می کنیم. لایه های جدید را در صفحه به زیر لایه های قبلی بکشید. فاصله 2 پیکسل بین این حالت و حالت قبلی دکمه را رعایت کنید. برای قراردادن دکمه در موقعیت دقیق از خطوط راهنما که در مرحله اول ایجاد کردید کمک بگیرید. حال مستطیل جدید را انتخاب کرده مقدار Opacity آنرا روی %100 و رنگ آنرا روی R:127 G:191 B:255 تنظیم کنید. رنگ مستطیل کوچک کناری را نیز به سفید تغییر دهید. در این مرحله به ایده ای برای متحرک سازی نیاز دارید. این طرح می تواند درخشش پس زمینه، تغییر رنگ یا Fade یک شکل به شکلی دیگر که در حالت normal دکمه رسم کرده اید و یا چرخش و جابجایی یک عنصر بصری در محدوده دکمه باشد. تعداد ایده هایی که به ذهنتان میرسد محدود به حوزه خلاقیتتان است! در این مثال همان شکل پس زمینه منو را بصورت دورانی خواهیم چرخاند.توسط Custom Shape Tool سمبلی که در پس زمینه منو استفاده کردیم را مجدداً انتخاب کرده و روی مستطیل دوم بصورت ایستاده بکشید. آنرا با رنگ سفید و Opacity به مقدار %25 تنظیم کنید. حال در حالیکه کلیدهای Ctrl+Alt را پایین نگه داشته اید، اشاره گر ماوس را جایی بین لایه سمبل و مستطیل دوم قرار داده و کلیک کنید. با اینکار اشاره گر ماوس تغییر شکل داده و باعث ماسک شدن لایه سمبل توسط لایه مستطیل خواهید شد. در نتیجه قسمتهای اضافی سمبل که خارج از مستطیل قرار دارند ماسک خواهند شد. چون نیاز به چرخش دقیق شکل داریم با کمک خطوط راهنما مرکز شکل را مشخص کنید.در صورتیکه پالت Animation مخفی است با انتخاب Windows > Animation آنرا نمایش دهید. در این پالت روی دکمه Duplicate selected frames برای تکثیر فریم جاری کلیک کنید. فریم دوم اضافه خواهد شد. در حالیکه فریم دوم در حالت انتخاب شده قرار دارد لایه سمبل را با کشیدن آن بر روی آیکن Create a new layer در پایین پالت Layers تکثیر کنید. در حالیکه لایه سمبل دوم انتخاب شده است با فشردن کلیدهای Ctrl+T آنرا به حالت Transform وارد کنید. فتوشاپ دستگیره های چرخش را در اطراف سمبل نمایش خواهد داد. با پایین نگه داشتن کلید Shift برای چرخش شکل در زوایای ثابت، شکل را 15 درجه در جهت عقربه های ساعت بچرخانید و کلید Enter را برای تایید تغییرات بزنید. دوباره همانطوریکه آموختید یک فریم دیگر ایجاد کرده سپس آخرین سمبل را انتخاب و تکثیر کنید. باز آنرا 15 درجه به جهت عقربه های ساعت بچرخانید. این کار را برای ایجاد 5 فریم تکرار کنید. وقتی ایجاد فریم پنجم به پایان رسید روی فریم اول در پالت Animation کلیک کرده سپس لایه های سمبل دیگر به غیر از سمبل اول را با کلیک روی آیکن چشم کنار آن invisible کنید. سپس به فریم دوم رفته به غیر از سمبل دوم بقیه سمبل ها را invisible کنید. اینکار را تا فریم پنجم انجام دهید. در نتیجه در هر فریم یک سمبل قابل مشاهده خواهد بود. با کلیک کردن روی دکمه Play Animation در پالت Animation، شبیه سازی چرخش کامل سمبل را با 5 فریم مشاهده خواهید کرد.طراحی حالت selected دکمهبه قسمت طراحی آخرین حالت دکمه یعنی حالت selected که بیان گر صفحه جاری کاربر است می رسیم. یکبار دیگر مانند ابتدای قسمت طراحی حالت hover، مستطیل اولیه و مستطیل کوچک کناری را تکثیر کرده و با رعایت فاصله 2 پیکسل آنرا به زیر مستطیل نمایانگر حالت hover بکشید.نکته مهمدر هنگام ادامه کار روی این فایل دقت کنید که فقط فریم اول در پالت Animation انتخاب شده باشد. در غیر اینصورت به انیمیشنی که ساخته اید صدمه خواهید زد. راه جلوگیری از این مساله طراحی کامل سه حالت دکمه در ابتدا و در نهایت دادن انیمیشن به حالت hover است.حال مستطیل جدید را انتخاب کرده مقدار Opacity آنرا روی %100 و رنگ آنرا روی R:76 G:115 B:153 تنظیم کنید. رنگ مستطیل کوچک کناری را نیز به R:255 G:150 B:0 تغییر دهید. دوباره توسط Custom Shape Tool سمبلی که در پس زمینه منو استفاده کردیم را مجدداً انتخاب کرده و روی مستطیل جدید بکشید. آنرا با رنگ R:102 G:153 B:204 و Opacity به مقدار 50% تنظیم کنید. مانند مرحله قبلی با نگاه داشتن کلیدهای Ctrl+Alt قسمتهای اضافی لایه سمبل آخری را توسط لایه مستطیل جدید ماسک کنید.شبیه سازی شفافیت %50 در فایلهای با فرمت GIFدر انتها با انتخاب گزینه Save for Web & Devices از منوی File تصویر متحرک منو را برای انتشار فشرده سازی می کنیم. در این پنجره گزینه GIF را از منوی Optimized file format انتخاب کنید. در صورتیکه دقت کرده باشید شفافیت حالت normal دکمه را با مقدار %50 تنظیم کردیم تا تصویر Watermark پس زمینه در زیر دکمه های منو نمایان باشد. اما همانطوریکه می دانید در فرمت GIF خصوصیت شفافیت پله ای PNG را نداریم. بنابراین برای شبیه سازی شفافیت %50 با GIF می بایست سطح مورد نظر را بصورت شطرنجی از پیکسلهای یکی شفاف و دیگری غیر شفاف پر کنیم. با انتخابDiffusion Transparency Dither از منوی Transparency dither algorithm سطحی شطرنجی برای دکمه حالت normal خواهیم داشت. این بار قسمت رنگ Matte را روی None باقی بگذارید. با ذخیره فایل، تصویر متحرک مورد نیاز برای 3 حالت Sprite منوی ناوبری را ایجاد کرده اید.!Flash Objects VS. Gif Animationبا انتخاب تعداد رنگ 16 در قسمت Colors هنگام ذخیره فایل، حجم فایل به اندازه کمتر 3 کیلو بایت خواهد رسید. برای آزمایش، اقدام به ساختن عنصر فلشی در همین ابعاد کنید. حجم فایل خروجی با مقدار کدی که به صفحه برای embed کردن object فلش اضافه می کنید را با حجم فایل جاوا اسکریپتی که برای حذف لایه فعال سازی عنصر فلش باید ضمیمه فایل شود را جمع بزنید و نتیجه را مقایسه کنید!منظور من در اینجا بی ارزش کردن زحمات دوستان فلش کار نیست. ولی با نگاه صحیح به موضوع و هدف عنصری که می خواهیم طراحی کنیم در میابیم انتخاب تکنولوژی صحیح برای رسیدن به آن هدف بسیار مهم است. عناصر فلش دارای امکانات بسیار حرفه ای و پیچیده ای هستند که باید در موضوعات و شرایط مناسب بکار گرفته شوند و شخصاً فکر می کنم انتخاب آن به عنوان منوی ناوبری اصلی سایت بخاطر اهمیت آن شاید عملی خردمندانه نباشد.نتیجه گیریدر بخش اول این مقاله با تکنیکها و روشهای لازم برای ایجاد فایل تصویری متحرکِ مورد نیاز برای منوی کاربری، شامل آماده سازی فایلهای شفاف GIF برای انتشار روی وب، آشنایی با طریقه طراحی منابع مورد استفاده در CSS Sprite ها، ابزارها و روشهای متحرک سازی GIF در فتوشاپ و شبیه سازی شفافیت %50 فایلهای GIF پرداختیم و دوستان تازه کار نیز بدین وسیله با عملیات عمومی ایجاد، طراحی و ذخیره فایلها در فتوشاپ آشنا شدند. در قسمت بعدی این مقاله به طریقه نوشتن Markup، استایل های مورد نیاز و تکنیک CSS Sprite برای تکمیل منوی کاربری خواهیم پرداخت. در صورتیکه نکته ای برای این بخش نیاز به توضیح بیشتر دارد در قسمت نظرات مطرح کنید.دریافت فایل منبع این پستفایلهای منبع این پست در قالب دو فایل PSD قابل دریافت است. با دریافت و مشاهده فایلها مواردی که در این بخش آموختید را مرور کنید.فایل منبع تصاویر منوی متحرک https://royagar.com/notes/39-12-1/طراحی-منوهای-متحرک-بدون-نیاز-به-فلش-بخش-اول-تهیه-منابع-تصویری آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 08:59:18 +0330 https://virgool.io/@royagar/ietester-%D8%B1%D9%81%D8%B9-%D9%85%D8%B4%DA%A9%D9%84-%D8%AA%D8%B3%D8%AA-%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C-%D8%A8%D8%A7-internet-explorer-cs7evhgnlmqi یکی از اصول اولیه طراحی وب سایت اطمینان از نمایش صحیح و یکسان آن در مرورگرهای مختلف است. چون تلاش طراح سایت، پوشش دادن هر چه بیشتر بازدیدکنندگان احتمالی که از مرورگرهای مختلف استفاده می کنند است.تصور کنید پروژه طراحی وب سایت به اتمام رسیده و در روز تحویل، رئیس شرکت سفارش دهنده سایت شما را با IE6 باز کرده و آشی از عناصر درهم و برهم تحویل بگیرد!خود من شخصاً در طراحی سایت سازگاری با تمام مرورگرهای مدرن و با تعدادی از مرورگرهای قدیمی شامل Internet Explorer 6.0، Internet Explorer 7.0، Mozilla Firefox 1.5 و Opera 8 را در نظر می گیرم. اگرچه نمی توان بخاطر ناسازگاری ها و عدم وجود CSS Hack برای تمام این مرورگرها یک وب سایت کاملاً منطبق در این نسخه ها بدست آورد اما حداقل باید از دسترسی کاربر به تمام اطلاعات عرضه شده در سایت مطمئن شد.تهیه نسخه های قدیمی مرورگرهای Firefox و Opera بسیار ساده است. با مراجعه به سایتهایی مانند www.oldapps.com نسخه های قدیمی نرم افزار ها در اختیار شما است. با نصب این مرورگرها در فولدرهای متفاوتی به غیر از نسخه های فعلی، مشکلی برای اجرای هم زمان آنها در یک ویندوز نخواهید داشت. اما همانطوریکه همه آگاه هستید Internet Explorer چیز دیگریست!نکتهبا نصب افزونه IETab بر روی فایرفاکس، هنگام سوئیچ وب سایت به حالت IE، سایت شما در مرورگر IE 7.0 نمایش داده می شود و نیازی به نصب برنامه دیگری برای تست سازگاری با IE7 نخواهید داشت. به همین صورت اگر به IE8 ارتقاء داده اید، با فعال کردن (Developer Tools (F12 و انتخاب Browser Mode: IE7 از منوی آن سایت را در حالت IE7 خواهید دید.مشکل امتحان سازگاری با مرورگرها و ویندوزهای مختلف در Internet Explorerبا وجود ارتقای به IE8 در ویندوز XP هنوز راه حلهای زیادی برای حل مشکل تست سازگاری وجود داشت و با کپی فایلهای IE6 و IE7 و تهیه فایلهای DLLی که لازم داشتند می شد سایت را در این مرورگرها امتحان کرد. ولی دردسر از موقعی شروع می شود که به ویندوز Vista ارتقاء پیدا کنید. بخاطر تغییرات اساسی در هسته Vista دیگر روش های قبلی جوابگو نخواهند بود.مدتی در جستجوی راه حلی برای این مشکل بودم تا اینکه محسن رهگذر، یکی از دوستان قدیمی و از طراحان با تجربه وب با معرفی برنامه ای مشکل من را برای همیشه حل کردند و حالا دیگر مجبور به نگهداری چندین نسخه از مرورگر دوست داشتنی IE بصورت Portable روی هارد دیسک نیستم.مرورگر IETesterاحتمالاً دوستانی هستند که از برنامه DebugBar از محصولات Core Services در زمانیکه هنوز افزونه های فایرفاکس عمومی نشده بودند استفاده کرده باشند. این شرکت مرورگری به نام IETester دارد که بصورت رایگان عرضه می شود و تا کنون بیشتر از یک میلیون بار دریافت شده است.از خصوصیات این نرم افزار می توان به امکان تست وب سایت برای نسخه های مختلف IE شامل 5.5، 6.0، 7.0 و 8.0 به طور همزمان و سازگاری با ویندوزهای XP، Vista و 7 اشاره کرد. در نسخه های Portable مرورگر IE امکان پیش نمایش لایه رفتار وب سایت وجود نداشت اما این برنامه بطور کامل جاوا اسکریپت را در تمام نسخه ها پشتیبانی می کند. سادگی کار با این نرم افزار مورد دیگری را برای توضیح باقی نمی گذارد.دریافت مرورگر IETester نسخه 0.4.1 https://royagar.com/notes/38-13-1/ietester-رفع-مشکل-تست-سازگاری-با-internet-explorer آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 01 Oct 2019 08:49:54 +0330 https://virgool.io/@royagar/%DA%A9%D9%86%D8%AA%D8%B1%D9%84-%D8%B9%D9%86%D9%88%D8%A7%D9%86-%D9%88-%D9%85%D8%AA%D8%A7-%D8%AA%DA%AF-%D9%87%D8%A7%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D8%B5%D9%88%D8%B1%D8%AA-%D9%BE%D9%88%DB%8C%D8%A7-f0qxoojt7yy6 بسیاری از دوستان برنامه نویس ASP.net علاقمند به دسترسی پویا به دو مورد ساده و درعین حال بسیار كاربردی Title و Meta در هر صفحه هستند. این مساله جایی اهمیت خود را نشان می دهد که در پروژه خود از Master Page ها استفاده کنید و یا دسترسی محلی به بیرون Place Holder ها امكان پذیر نباشد.در این مطلب كوتاه، نحوه دسترسی به این دو مورد را بررسی می كنم و امیدوارم رنكینگ سایت های دوستان با تعیین مقادیر صحیح و مناسب در این دو تگ، افزایش پیدا كند. برای سهولت کار دستورات با دو زبان #C و VB نوشته شده اند.Titleبرای دسترسی پویا به تگ Title، یك دستور ساده وجود دارد:#Cthis.Page.Page.Title = &quottest page&quotVBMe.Page.Page.Title = &quotTest page 1&quotاین دستور در تمام صفحات اعم از Page Master ها و یا Web Form ها قابل استفاده است. توجه كنید كه دستور فوق باید در متد Page_Load یا form_Load نوشته شود.#Cprotected void Page_Load(object sender, EventArgs e) { this.Page.Page.Title = &quottest page&quot }VBProtected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load Me.Page.Page.Title = &quotTest page 1&quot End SubMetaدر این مثال سعی می کنم متدی كاربردی را معرفی کنم تا توسط آن به راحتی اقدام به ایجاد و افزودن متا تگ ها نمایید.#Cprivate string _metacontents; public string MetaContents { get { return _metacontents; } set { _metacontents = value; } } private void addMeta(string MetaName, string MetaContent) { HtmlMeta hm = new HtmlMeta(); hm.Name = MetaName; MetaContents = MetaContent; hm.Content = MetaContents; Header.Controls.Add(hm); }VBPrivate Sub addMeta(ByVal MetaName As String, ByVal MetaContent As String) Dim hm As New HtmlMeta() hm.Name = MetaName hm.Content = MetaContent Header.Controls.Add(hm) End Subحال برای فراخوانی دستورات فوق، به صورت زیر عمل کنید. توجه داشته باشید این دستورات باید حتماً در متد Page_Load یا form_Load قرار گیرد تا نتیجه ی آن دیده شود. بهتر است متدی جهت تعیین مقادیر نوشته شود و در form_Load فراخوانی گردد.#Cprotected void Page_Load(object sender, EventArgs e) { addMeta(&quotKeyWords&quot, &quotStandard,Web,Application,Test&quot); addMeta(&quotdescription&quot, &quotStandard Web Application Test&quot); }VBProtected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load Call addMeta(&quotKeyWords&quot, &quotStandard,Web,Application,Test&quot) Call addMeta(&quotdescription&quot, &quotStandard Web Application Test&quot) End Subنتیجه گیریدر این مطلب کوتاه به دو دستور ساده و کاربردی برای کنترل عنوان و متا تگ های صفحه بصورت پویا توسط دو زبان #C و VB پرداختیم. با توجه به نکات موثر در بهینه سازی صفحات، می توان به طراحی سایتی قابل دسترس برای بازدیدکنندگان توسط موتورهای جستجو امیدوار بود. در پناه خدا موفق و سربلند باشید. https://royagar.com/notes/37-12-1/کنترل-عنوان-و-متا-تگ-های-صفحه-بصورت-پویا آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Mon, 30 Sep 2019 22:02:39 +0330 https://virgool.io/@royagar/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DA%AF%D9%88%DB%8C-%D8%B4%DB%8C%D8%B4%D9%87-%D8%A7%DB%8C-%D8%AA%D9%88%D8%B3%D8%B7-coreldraw-ykhvzgsvuagn به عنوان اولین مقاله آموزشی در زمینه طراحی برای چاپ به سراغ برنامه CorelDRAW میرویم. زمانی برنامه Macromedia Freehand برنامه محبوب چاپخانه ها و طراحان در ایران بود، ولی مدتی بعد CorelDraw بخاطر توانایی هایش توانست گوی سبقت را از این حریف سالخوده برباید. اکنون CorelDraw و Adobe Illustrator دو برنامه مطرح در بین برنامه های ویرایش بر پایه Vector هستند.در این پست قدم به قدم به طراحی گویی شیشه ای خواهیم پرداخت که می تواند کارایی های متفاوتی داشته باشد. به عنوان مثال طرح بالا کاربرد این گوی شیشه ای را در طراحی صفحه Index کاتالوگ معرفی محصولات یک شرکت فرضی نشان می دهد.در نوشتن این سری مقالات سعی می کنم با شرح توضیحات اضافی برای دوستان تازه کار، به همراه آموزش چگونگی طراحی طرح مشخص شده، نحوه کار با نرم افزار مربوطه را نیز شرح داده باشم.یک دایره بکشیددر صورتیکه دقت کنید خواهید دید که حتی پیچیده ترین اشکال بر پایه سه شکل هندسی مربع، دایره و مثلث ساخته شده اند. بنابراین برای شروع ترسیم هر شکلی، هر چقدر پیچیده، آنرا در این سه شکل خلاصه کرده و از ابزارهای مربوطه برای رسم آن شکل استفاده کنید. طبیعتاً طراحی گوی شیشه ای ما نیز از یک دایره شروع خواهد شد! ابزار (Ellipse (F7 را از جعبه ابزار (Toolbox) انتخاب کرده و با نگهداشتن کلید Ctrl یک دایره متناسب بکشید.دایره را با گرادیان شعاعی پر کنیدحال دایره را انتخاب کرده از جعبه ابزار، گزینه (Fill > Fountain Fill (F11 را انتخاب کنید تا پنجره Fountain Fill نمایش داده شود.در قسمت Type مقدار Radial و در قسمت Center offset به ترتیب مقادیر 0% برای Horizontal و 27% برای Vertical را وارد کنید. در صورتیکه هنگام تغییر این مقادیر به مربع Preview در سمت راست این پنجره دقت کنید می بینید که این مقادیر برای تنظیم نقطه مرکزی گرادیانی که در حالت شعاعی رسم می کنید می باشد. در حالت پیش فرض مخلوط رنگی شما با استفاده از دو رنگ ساخته می شود اما در این مورد، ما به رنگ سوم نیز نیاز داریم. در قسمت Color Blend رادیو باکس Custom را انتخاب کنید تا امکان افزودن رنگهای بیشتر فعال شود. حال اولین مربع مشکی کوچک سمت چپ را انتخاب کرده با انتخاب دکمه Other زیر پالت رنگها، پنجره Select Color باز می شود. مقادیر C:0 M:0 Y:60 K:0 را به ترتیب در قسمت Components وارد کنید. به پنجره Fountain Fill بازگشته و برای افزودن رنگ دوم جایی بین دو مربع سیاه و سفید Double Click کنید. کمی بالاتر کنترل Position فعال می شود. آنرا با مقدار 36% برای تنظیم دقیق موقعیت این رنگ جدید روی خط گرادیان مقدار دهی کنید. حالا دقیقاً مرحله تنظیم رنگ این نقطه جدید را مانند آنچه گفته شد با انتخاب دکمه Other و وارد کردن مقادیر C:0 M:60 Y:100 K:0 تکرار کنید. حال این کار را برای نقطه سوم، مربع سفید نیز با مقادیر C:0 M:0 Y:60 K:0 تکرار کنید.در نهایت دایره را انتخاب و از پالت رنگهای سمت راست روی ضربدر Right Click کنید تا رنگOutline دایره حذف شود.دو دایره شفاف به عنوان بازتاب نور روی گوی رسم کنیدابزار Ellipse را بار دیگر انتخاب کرده و یک دایره دیگر روی دایره قبلی مانند تصویر بالا رسم کنید. با انتخاب هر ابزار، نوار خصوصیات (Property Bar) تنظیمات آن ابزار را نمایش خواهد داد. در نوار خصوصیات در قسمت Scale Factor روی آیکن قفل برای آزاد کردن Sizing Rate کلیک کنید و مقادیر 90% برای X و 85% را برای Y وارد کنید تا دایره شما شکل تخم مرغی مناسبی بگیرد. در مرحله بعد دایره جدید را انتخاب کرده از پالت رنگهای سمت راست روی رنگ سفید کلیک کنید تا دایره با رنگ سفید پر شود. رنگ Outline این دایره را نیز مانند قبلی با کلیک راست روی ضربدر در پالت رنگ حذف کنید.حال با انتخاب Interactive Transparency Tool، نوار خصوصیات، وضعیت شفافیت این دایره را نشان خواهد داد. از منوی Transparency Type نوع Uniform را انتخاب کرده و در قسمت Starting Transparency مقدار 80 را وارد کنید.حال این دایره را انتخاب کرده و با انتخاب (Edit > Duplicate (Ctrl+D  از نوار منوی اصلی برنامه، دایره را تکثیر کنید. در حالیکه ابزار Pick Tool انتخاب شده است روی این دایره یک بار کلیک کنید تا دایره به حالت چرخش وارد شود. با نگه داشتن کلید Ctrl دایره را 90 درجه بچرخانید و آنرا در موقعیتی مانند تصویر بالا قرار دهید.نکتهراه سریعتر برای تکثیر یک شکل دقیقاً در جای قبلی اش استفاده از کلید + در قسمت ماشین حسابی صفحه کلید است.بازتاب پنجره را روی گوی شبیه سازی کنیدبرای شبیه سازی بازتاب نور یک پنجره روی گوی به این ترتیب عمل کنید: با انتخاب ابزار(Rectangle Tool (F6 یک مستطیلِ کشیده ایستاده در قسمت بالا و سمت راست دایره رسم کنید. با یک تک کلیک روی مستطیل آنرا به حالت چرخش وارد کرده و آنرا حدود 60 درجه بچرخانید. شیء Rectangle در CorelDraw دارای خصوصیات و امکانات خاص خود است که در اینجا مورد نظر ما نیست. برای اینکه بتوانیم اضلاع شکل مستطیل را ویرایش کنیم باید این شکل را به یک شیء منحنی تبدیل کنیم. برای اینکار روی مستطیل راست کلیک کرده و گزینه Ctrl+Q) Convert To Curves) را انتخاب کنید.در نتیجه با استفاده از ابزار (Shape Tool (F10 می توانید اضلاع را ویرایش کنید. با انتخاب این ابزار روی هر یک از اضلاع راست کلیک کرده گزینه To Curves را انتخاب کنید. حال CorelDraw دستگیره هایی برای ویرایش در انتهای هر یک از اضلاع اضافه می کند. با تنظیم دستگیره ها سعی کنید مستطیل را همانند شکل بالا تغییر شکل دهید.برای رسم خطوط داخلی پنجره نیز با ابزار Rectangle Tool دو مستطیل کشیده بلند رسم کرده و با تبدیل آنها به منحنی، آنها را مانند شکل بالا ویرایش کنید. حال هر دو مستطیل کشیده را با نگهداشتن کلید Shift انتخاب کرده و گزینه Weld را از نوار خصوصیات انتخاب کنید. در نتیجه هر دو شکل به هم جوش خورده و تشکیل یک شکل واحد را خواهند داد.مجدداً شکل جدید و مستطیل پنجره را همزمان توسط Shift انتخاب کرده، گزینه Back Minus Front را از نوار خصوصیات انتخاب کنید تا خطوط داخلی پنجره از فرم مستطیل پنجره حذف شوند. با این کار شکل پنجره کامل می گردد.اکنون به روشی که آموخته اید پنجره را به ترتیب با رنگ سفید پر کرده با انتخاب Interactive Transparency Tool از نوع Radial آنرا شفاف کنید.با رسم یک دایره، سایه رنگی زیر گوی را ترسیم کنیددایره ای دیگر دقیقاً به اندازه گوی اصلی رسم کنید. آنرا انتخاب کرده و در نوار خصوصیات در حالی که آیکن قفل آن باز است مقادیر 90% برای X و 15% را برای Y وارد کنید و آنرا در زیر گوی قرار دهید. بعد از حذف رنگ Outline دایره، از جعبه ابزار گزینه (Fill > Fountain Fill (F11 را انتخاب کنید تا پنجره Fountain Fill نمایش داده شود. در قسمت Type مقدار Linear را انتخاب کنید. در Color Blend رنگ آغازین را با کلیک روی دکمه From و بعد Other به ترتیب C:0 M:60 Y:100 K:0 وارد کنید. همینطور رنگ قسمت To را به C:0 M:0 Y:100 K:0 تغییر دهید. در قسمت Option مقدار Angle را برای تنظیم زاویه گرادیان بصورت عمودی، روی 90 درجه تنظیم کرده و برای Edge pad مقدار 10% را وارد کنید.در نهایت با انتخاب Interactive Transparency Tool از نوع Uniform با مقدار 75 آنرا شفاف کنید.نکتهبا کمک ابزار(Interactive Fill Tool (G و نوار خصوصیات، به راحتی می توانید بدون باز کردن پنجره Fountain Fill اقدام به ویرایش نوع و زاویه پر شدن شکل مورد نظرتان نمایید.با رسم دایره ای دیگر، انعکاس گوی را شبیه سازی کنیدآخرین قسمت این پست آموزشی شبیه سازی انعکاس گوی در سطح محل قرار گیری آن است. در حالی که گوی اصلی انتخاب شده، Edit > Duplicate را از نوار منوی اصلی برنامه انتخاب کنید تا دایره تکثیر شود. در نوار خصوصیات با انتخاب گزینه Mirror Vertically آنرا بصورت عمودی برعکس کنید. حال اندازه دایره را با مقدار Scale Factor 90% برای X و 75% برای Y تغییر داده و در زیر سایه رنگی پایین گوی قرار دهید.ابزار Interactive Transparency Tool را از جعبه ابزار انتخاب کنید. سپس از منوی Transparency Type نوع Linear را انتخاب کنید. با اینکار دو دستگیره که در انتهای هر سر آن یک مربع، یکی به رنگ سیاه و دیگری سفید قرار دارد به دایره اضافه می شوند. مربع سفید مقدار شفافیت نقطه آغازین را کنترل می کند که معمولاً 0 است و مربع مشکی مقدار شفافیت نقطه پایانی را با مقدار پیش فرض 100. در این مورد، مربع سفید را انتخاب کرده و در قسمت Transparency Midpoint مقدار 85 را وارد کنید تا نقطه اول ما از شفافیت 85 آغاز شده و در نقطه دوم به شفافیت 100 برسد. حال در قسمت Fountain Transparency Angle and Edge Pad به ترتیب از بالا به پایین مقدار 90- و 23 را وارد کنید. همانند زمانی که با استفاد از پنجره Fountain Fill اقدام به تنظیم دقیق نحوه پر شدن شکلتان می کنید، با انتخاب گزینه Edit Transparency پنجره Fountain Transparency تنظیمات کاملی را در اختیار شما قرار خواهد داد.حال می توانید با تکثیر و تغییر رنگ این گوی، آنرا برای کاربردهای مختلف و در پروژه های متفاوت بکار بگیرید. همانطوریکه میبینید من با تکثیر این گوی در رنگهای متفاوت از آن برای قسمت header یک وب سایت فرضی استفاده کرده ام.نتیجه گیریدر این پست به بهانه ترسیم یک گوی شیشه ای نکات آموزشی فراوانی را درباره برنامه CorelDraw تحت پوشش قرار دادیم. از مهمترین آنها می توان به چگونگی رسم اشکال پایه هندسی، نحوه رنگ آمیزی اشکال با گرادیان چند رنگی، چگونگی تبدیل اشکال پایه هندسی به منحنی و ویرایش اضلاع آن، ترکیب دو شکل مستقل، بدست آوردن یک شکل جدید توسط حذف دو شکل مجزا از همدیگر و تنظیم دقیق شفافیت یک شکل اشاره کرد.دریافت فایل منبع این پستبا اینکه در طراحی این گوی از نسخه X4 برنامه CorelDraw استفاده شده، اما فایل منبعی که دریافت می کنید با نسخه 12 به بعد این برنامه سازگار است.دریافت فایل منبع گوی شیشه ایhttps://royagar.com/notes/35-11-1/طراحی-گوی-شیشه-ای-توسط-coreldraw آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Sat, 28 Sep 2019 17:59:44 +0330 https://virgool.io/@royagar/10-%D8%AE%D8%B5%D9%88%D8%B5%DB%8C%D8%AA-%DB%8C%DA%A9-%D8%A7%D8%AF%DB%8C%D8%AA%D9%88%D8%B1-%D8%AA%D8%AD%D8%AA-%D9%88%D8%A8-%D9%85%D9%86%D8%A7%D8%B3%D8%A8-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA%D9%87%D8%A7%DB%8C-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF-tcw1ncyqjun1 برای جلوگیری از به خطر افتادن تمام سعی و تلاشی که توسعه دهندگان وب برای تعریف Style ها و کد نویسی مطابق با استانداردها بکار برده اند توسط ادیتورهای تحت وب، توسعه دهندگان ممکن است مجبور به آموزش نویسندگان محتوی سایت و یا حتی تهیه، نصب و تنظیم ادیتوری جدید باشند. نکاتی که در رابطه با تنظیمات یک ادیتور سایت باید به آن توجه شوند عبارتند از:در شرایط مختلف خروجی های ادیتور را چک کنید. اگرچه بازار پر است از ادیتور هایی که با تغییر پیکربندیشان کدهای استاندارد HTML یا حتی XHTML تولید می کنند، برای این ادیتورها تولید کد نامعتبر غیر عادی نیست.بعضی ادیتورها دارای امکان نمایش کد منبع (source-code view) هستند. بسته به سطح کاربران نویسنده محتوی سایت، این خصوصیت ممکن است نیاز به فعال و یا غیر فعال شدن داشته باشد. بعضی ادیتورها دارای نوعی الگوی مجوز دهی هستند که می تواند برای بعضی کاربران امکان نمایش کد منبع را فعال کند و برای بعضی نه.خصوصیات مرتبط به کنترل نحوه نمایش محتوی (لایه دوم) در ادیتور باید محدود شوند. امکاناتی که رنگ فونت، نوع فونت و رنگ پس زمینه را کنترل می کنند را غیر فعال کنید. همانطوریکه می دانید این خصوصیات فقط باید با CSS کنترل شوند.ادیتور باید امکان اعمال کردن کلاسهای CSS را داشته باشد. یک ادیتور خوب پیوستگی یک فایل CSS را به ادیتور پشتیانی خواهد کرد. بعضی ادیتورها نیاز دارند که توسط طراح برای اینکه کدام گزینه به منوی CSS آنها افزوده شود تنظیم شوند. بهترین ها از نوع محتوی متن حمایت خواهند کرد و فقط اجازه بکار بستن کلاسها بر پایه قوائد CSS را خواهند داد. مانند جلوگیری از افزودن قائده p.error به یک <span>.پشتیبانی کلاسهای CSS توسط ادیتور باید شامل امکانی برای اعمال کردن CSS به عناصر معین شده باشد. به عبارتی دیگر دادن کلاس به یک <li> در داخل <ul> توسط نوعی فرایند انتخاب، باید به سادگی دادن کلاس به یک <ul> باشد. یک روش رایج برای این کار یک کلیک ساده برای انتخاب آن عنصر در ساختار درختی DOM در نوار وضعیت است. (body > div > ul > li > a).به علت اینکه ممکن است قوائد تعریف شده در CSS اصلی برای تفسیر توسط ادیتور خیلی پیچیده باشند و قوائد محتویات کامل، مانند عنصر <p> داخل contents# در مقابل related# ممکن است قابل اجرا و پشتیبانی نباشد، فایل های CSS ی که با ادیتور پیوسته شده است ممکن است خلاصه ای از فایل های CSS اصلی باشد. بسته به محتوایی که ویرایش می شود، استفاده از چندین فایل CSS می تواند راه حل دیگری باشد.ادیتور باید تگ های پایه معنی گرای XHTML مانند تگ های سرصفحه (h1-6)، قالبندی پاراگرافها، حداقل دو نوع از لیستها، بلاک نقل قول (blockquote)، متن از قبل قالبندی شده و آدرس ها را پشتیبانی کند.همچنین یک ادیتور مناسب تگ های نامعتبر و ناخواسته را از محتوی الصاقی از Clipboard پاک می کند و یا تنظیماتی برای پاکسازی محتویات الصاقی خواهد داشت. غالباً هنگام الصاق محتویات از برنامه های پردازشگر متن یا صفحات وب به داخل ادیتورهای WYSIWYG، قالب بندی آنها حفظ می شوند. وقتی این اطلاعات با کدهای معتبر ترکیب می شوند اغلب باعث نامعتبر شدن آنها شده و Style هایی را به محتوی اضافه می کنند که باید از بیرون محتویات و توسط CSS اضافه و کنترل شوند.ممکن است لازم باشد که به نویسنده محتوی بگویید در صورتیکه برنامه ادیتور آنها تگ های نامعتبر را از محتویات ورددی پاک نمی کند، آنها باید قبل از الصاق محتویات در داخل ادیتور WYSIWYG، با الصاق آنها در داخل یک ادیتور متن ساده (مانند Notepad) محتویات را از هرگونه قالبندی پاکسازی کنند.به دنبال ادیتور تحت وبی باشید که بیشترین مرورگرها را پشتیبانی کرده و به خصوصیات اشاره شده در بالا دست بیابد. اگرچه ادیتورهای امروزی برای Windows و هم برای Mac OSX با قابلیت سازگاری با تقریباً هر مرورگری در دسترس هستند، این غیر عادی نیست که ادیتور WYSIWYG ی پیدا کنید که فقط برای IE پیکر بندی شده باشد.ادیتور پیشنهادی: CKEditorبعد از مدتها جستجو و آزمایش ادیتورهای مختلف، به این نتیجه رسیدم که ادیتور CKEditor بیشترین قابلیت تنظیم و سازگاری را با موارد اشاره شده دارد. CKEditor، ادیتور کد باز (open source) و رایگانی که توسط Frederico Caldeira Knabben نوشته شده، از محبوب ترین ادیتورهای موجود بین طراحان و توسعه دهندگان وب است. امکان Word clean-up این ادیتور بطور خودکار محتویی که از Microsoft Word الصاق می شود را شناسایی و پاکسازی می کند. همینطور با ویرایش چند فایل به سادگی امکانات این ادیتور قابل تنظیم است.لینکهای مرتبطصفحه اصلی ادیتور CKEditorپیش نمایشی از ادیتور CKEditorبعضی سایتهایی که از CKEditor استفاده می کننددریافت ادیتور CKEditorنتیجه گیریپیروی و ارزیابی معیارهای اشاره شده می تواند به معنای تفاوت بین خلق یک سایت قابل اطمینان و سازگار با استانداردها با داشتن یک برنامه ویرایشگر محتوی که نتیجه ماه ها کار را تخریب می کند باشد. کیفیت و کارایی هر ادیتوری که برای تولید محتوی بکار می برید باید با این استانداردها مورد ارزیابی قرار گرفته و تنظیم شود تا کدی تولید شود که تا آنجایی که امکان دارد معتبر باشد. شما از چه ادیتوری استفاده می کنید و چه سیاستهایی را برای کنترل خروجی ادیتور و حفاظت از ساختار وب سایت بکار می برید؟ با استفاده از فرم ارسال نظرات، تجربیات و دیدگاه های خود را با دیگران به اشتراک بگذارید.این پست با نگاهی به کتاب Adapting to Web Standards توسط Christopher Schmitt نوشته شده است. https://royagar.com/notes/34-12-1/10-%D8%AE%D8%B5%D9%88%D8%B5%DB%8C%D8%AA-%DB%8C%DA%A9-%D8%A7%D8%AF%DB%8C%D8%AA%D9%88%D8%B1-%D8%AA%D8%AD%D8%AA-%D9%88%D8%A8-%D9%85%D9%86%D8%A7%D8%B3%D8%A8-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA%D9%87%D8%A7%DB%8C-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Tue, 24 Sep 2019 12:20:08 +0330 https://virgool.io/@royagar/5-%D8%AF%D9%84%DB%8C%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D9%85%DA%A9%D8%A7%D8%B1%DB%8C-%D8%A8%D8%A7-%DB%8C%DA%A9-%D9%88%D8%A8%D9%84%D8%A7%DA%AF-simc7v2uxjvn طراحان بسیاری دارای دانش قابل توجهی هستند ولی متاسفانه دانش خود را با دیگران به اشتراک نمی گذارند. در این پست من در 5 دلیل شرح خواهم داد که چرا هر طراحی باید با وبلاگها همکاری کند و این چطور به تخصصش کمک خواهد کرد.1. خودتان را معرفی کنیدبخاطر زندگی در عصر دیجیتال، حضور Online شما خیلی مهم است. همکاری با یک وبلاگ روش کاملی برای رسیدن به این هدف است. با اینکار شما نام خودتان را در میان همکاران خلاق و مشتریان بالقوه خود مطرح خواهید کرد. اگر چیز مهمی برای گفتن دارید، مطمئناً شناخته خواهید شد.2. خودتان را به عنوان یک حرفه ای تصدیق کنیدکسی که یک حرفه ای قلمداد می شود، نه تنها مورد احترام است بلکه مورد اعتماد هم قرار خواهد گرفت. چگونه به این هدف می رسید؟ خوب، سوالی که باید از خودمان بپرسیم این است که برای رسیدن به جایگاه مناسب مورد نظرمان در زندگی، چه اطلاعاتی از خود عرضه می کنیم. یکبار دیگر، ما در دنیایی دیجیتال زندگی می کنیم و راه حل، حضور Online شما است. نداشتن همکاری قابل توجه Online به مانند اصلاً وجود نداشتن شماست. تأسف برانگیز است اما افراد زیادی هستند که از این قضیه تا کنون ضربه خورده اند. به عنوان یک نکته، مطمئن شوید تاثیری که بر جا می گذارید صادقانه باشد. هیچ کس علاقه ای به یک حقه باز ندارد.3. دانش خود را ارتقاء بخشیدمانند خیلی چیزها، هر چه بیشتر راجع به موضوعی بحث و گفتگو کنید بیشتر آنرا درک کرده و فرا خواهید گرفت. اگر هم دانشتان محدود است باز چیزی برای ارائه کردن دارید. هیچ کس نمی تواند چیزی را دقیقاً به همان روشی که شما بیان می کنید اظهار کند.4. مهارتهای خود را جلا دهیداز قدیم گفته اند که کار نیکو کردن از پر کردن است. یک مطلب آموزشی جالب درباره تکنیکی که می دانید بنویسید. با استفاده از بخشهایی که به عنوان نمونه کار استفاده می کنید نه تنها مهارتهای خود را جلا داده اید بلکه با اینکار با یک تیر دو نشان زده اید. این زنگ تفریحی جالب در حین انجام کار برای مشتری است. همچنین بیشتر مواقع نمونه هایی که برای خودتان خلق می کنید بهترین کارهایتان خواهد بود. چرا؟ چون می دانید چه چیزی دلپسند به نظر می رسد و شما فقط می خواهید خودتان را خشنود کنید و نه کس دیگری را.5. کمی پول بدست آوریدبرای خیلی ها این مهمترین دلیل است. دراین شرایط دشوار اقتصادی که همیشه سفارش کار طراحی برای انجام دادن نداریم، چرا برای به اشتراگ گذاشتن دانش خود با دیگران وقت نگذاریم؟ برای بدست آوردن کمی پول می توانید چهار دلیل اول را بکار ببرید! این فوق العاده است! اگرچه برای پرداخت همه صورتحساب ها کافی نخواهد بود ولی کمی پول نقد اضافی خواهد بود که احتمالاً رویش حساب نمی کردید.نتیجه گیریاین پست ترجمه ای بود از مطلب Five Reasons To Contribute To A Blog توسط Tim Smith. چون تصمیم به انعکاس مطالب بیشتری از جامعه طراحان وب و چاپ ایران در وبلاگ رویاگر دارم این پست را به عنوان دعوت نامه ای برای همکاری از دوستانی که هنوز خود را بصورت Online معرفی نکرده اند در نظر بگیرید. اگر بخاطر نکاتی که مطالعه کردید مایل به همکاری در وبلاگ رویاگر هستید و یا اگر می خواهید از رویاگر پشتیبانی کرده باشید حتماً با من تماس بگیرید تا مطلب شما به نام خودتان در رویاگر منتشر شود.© در تهیه تصاویر استفاده شده در این پست از بروشور راهنمای کاربردی زندگی در تهران استفاده شده است. https://royagar.com/notes/32-11-1/5-دلیل-برای-همکاری-با-یک-وبلاگ آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Thu, 19 Sep 2019 15:12:21 +0430 https://virgool.io/apieco/web-slice%D9%87%D8%A7-%D8%AF%D8%B1-internet-explorer-80-rp1kz2lrikns بالاخره Internet Explorer 8.0 در 19 مارس 2009 منتشر شد. بخاطر موفقیت IE8 در آزمون Acid2 این مرورگر به جرگه مرورگرهای استاندارد امروزی پیوست و حالا می توانید به راحتی پیش نمایش سایت خود را در Firefox ببینید با اعتماد به اینکه در IE هم بطور صحیح نمایش داده خواهد شد. تنها نگرانی باقیمانده سازگاری سایت شما با Internet Explorer 6 ،Internet Explorer 7، نسخه های قدیمی Safari ،Firefox 1.5،Opera 8.0 و Google Chrome خواهد بود!!گذشته از مبحث آزار دهنده Backward Compatibility، مرورگر IE به همراه خصوصیات چشمگیری به بازار عرضه شد که یکی از جالبترین آنها Web Sliceها هستند که در این پست در مورد آن صحبت خواهم کرد.Web Sliceها در عملاجازه دهید برای آشنایی بیشتر با Web Sliceها مروری بر نحوه استفاده و بکارگیری آنها در سایت رویاگر داشته باشیم. در رویاگر به غیر از امکان RSS که در تمام قسمتهای پویای سایت تعبیه شده است کاربر با بردن ماوس به روی بخش مورد نظر ما Web Sliceها را کشف می کنند. به این روش In-document Discovery گفته می شود.IE با پیدا کردن هر Web Slice، آنرا در دکمه Feed Discovery در نوار فرمان قرار می دهد.به عنوان مثال با انتخاب عنوان آخرین پست که در دکمه Feed Discovery منعکس شده است دراین برش (Slice) از سایت عضو خواهید شد. در نتیجه برای اطلاع از آخرین پست رویاگر فقط مرورگر خود را باز کنید! به محض عضویت، موتور دانلود Feed مرورگر به طور دوره ای Web Sliceها را با اطلاعاتی که از سایت ها دریافت می کند به روز خواهد کرد. حال اگر IE تغییری را تشخیص دهد با Bold کردن متن دکمه مربوطه کاربر را مطلع خواهد کرد.در نتیجه شما عنوان آخرین ارسال رویاگر را همیشه در Favorites Bar خواهید داشت و با کلیک کردن روی دکمه آن در پنجره پیش نمایش (Preview)، متن Intro را مشاهده کرده و امکان مشاهده کامل پست را خواهید داشت.برای دسترسی به صفحه کامل وب روی دکمه Open و برای به روز رسانی محتویات Cache شده Web Slice روی دکمه Refresh در پنجره پیش نمایش کلیک کنید.از دیگر قسمتهایی که در رویاگر به Web Sliceها مجهز شده اند می توان به لینکهای تایید شده، آخرین ارسالهای وبلاگ و تازه ترین نمونه کارها اشاره کرد.چگونگی افزودن Web Sliceها به سایت شماسادگی اجرا و بکارگیری Web Sliceها متحیر کننده است. Web Slice ها بر پایه hAtom Microformat با تعدادی ویژگی اضافی ساخته شده اند. برای قابل عضویت شدن قسمتی خاص از صفحه، Web Sliceها از تگهای عادی HTML معنی گرا استفاده می کنند. برای شناسایی Web Sliceها، IE سایت را برای عناصری با نام کلاس و شناسه خاص جستجو می کند. برای افزودن این ویژگی به سایت خود حداقل به سه عنصر hslice، id و entry-title نیازمندید.عنصر hsliceعنصر hslice مشخص کننده بخشی از وب سایت است که برای مرورگر قابل عضویت است. این عنصر شامل تمام خواص لازم و اختیاری یک Web Slice است.<div class=&quothslice&quot id=&quotscore&quot>بر خلاف کلاسهای Style معمول، کلاسهای Web Slice نیازی به وجود یک قائده (Rule) در فایل Style Sheet سایت ندارند. در صورت نیاز به استفاده از نام یک کلاس دیگر برای این عنصر می توانید نام کلاس Web Slice را با نام کلاس دلخواه خود با استفاده از یک فاصله ترکیب کنید.<div class=&quothslice forecast&quot id=&quotweather&quot>عنصر idبه همان روشی که از تگ <a> همراه با خصوصیت Name استفاده می کنید، از خصوصیت id برای شناسایی Web Sliceها در URL استفاده می شود. خصوصیت id حتماً باید در همان عنصری باشد که از کلاس hslice استفاده می کند. طبیعی است که id نباید تکراری باشد. اگر چند Web Slice دارای یک id یکسان باشند، IE فقط اولی را قبول خواهد کرد. در صورت تغییر مقدار id، مرورگر IE قادر به شناسایی Web Slice نخواهد بود.عنصر entry-titleحداقل یک فرزند (Child) از تگی که کلاس hslice را دارد باید از کلاس entry-title استفاده کند. مقدار این عنصر در حقیقت متن دکمه Web Slice و اسم بکار رفته برای دکمه Feed Discovery خواهد بود.<div class=&quothslice&quot id=&quotmain&quot> <h2 class=&quotentry-title&quot>Tehran Weather</h2> ... </div>این امکان وجود دارد که چندین محدوده متنی را برای ساختن عناوین پویا که با Web Slice به روز می شوند ترکیب کرد. کلاس entry-title می تواند به بیشتر از یک عنصر داده شود. IE مقادیر را به ترتیبی که در متن HTML آمده اند به هم ملحق خواهد کرد. در مثال زیر IE عبارت Tehran Weather 62° را هنگام به روز رسانی Web Slice نمایش خواهد داد.<div class=&quothslice&quot id=&quotmain&quot> <h2 class=&quotentry-title&quot>Tehran Weather</h2> <p>It is currently <span class=&quotentry-title&quot>62°</span>.</p> </div>عناوین Web Sliceها به 128 کاراکتر محدود هستند.عنصر entry-contentاین خصوصیت بخشهایی که باید بعد از کلیک روی دکمه Web Slice در پنجره پیش نمایش، توسط IE نمایش داده شوند را مشخص می کند. طول و عرض پیش فرض پنجره پیش نمایش مطابق با ابعاد عنصری که به عنوان entry-content طراحی شده تعیین می گردد. همانند خصوصیت entry-title هر Web Slice می تواند شامل بیشتر از یک entry-content باشد که همه این عناصر با هم ترکیب شده و یک پیش نمایش واحد را خواهند ساخت.به دلایل امنیتی پنجره پیش نمایش اجازه استفاده ازScript ها و یا کنترل های Microsoft ActiveX را نخواهد داد. همچنین فرمها و دکمه های HTML نیز پشتیبانی نمی شوند. در عوض می توانید لینکهایی که شامل پارامترهای URL هستند را برای کاربر تدارک ببینید و در نتیجه صفحه جاری برای نمایش نتیجه کلیک کاربر روی لینک مشخص شده توسط مرورگر استفاده خواهد شد.استفاده از عنصر entry-content اختیاری است ولی شدیداً توصیه می شود.اجرای Web Slice در قسمتهای داینامیک سایتبه عنوان مثال بیایید نگاهی به قسمت آخرین پستهای رویاگر بیاندازیم. این قسمت از سایت در حقیقت یک User Control است که بوسیله یک کنترل Repeater، یک Unordered List) ul) را برای نمایش آخرین ارسالهای رویاگر تولید می کند.<div class=&quothslice&quot id=&quotlatestposts&quot> <h2 class=&quotentry-title&quot>آخرین پستهای رویاگر</h2> <asp:Repeater ID=&quotlastContentsRepeater&quot runat=&quotserver&quot> <HeaderTemplate> <ul class=&quotentry-content&quot > </HeaderTemplate> <ItemTemplate> <li> ... </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </div>همانطوریکه مشاهده می کنید Repeater در یک div که با کلاس hslice و شناسه latestposts مشخص شده قرار گرفته است. در نتیجه تمام محتویات این div که خروجی های ul هستند به عنوان Web Slice شناسایی خواهد شد. تگ h2 با کلاس entry-title عنوان این Web Slice را مشخص می کند. در قسمت HeaderTemplate کنترل Repeater، تگ ul دارای کلاس entry-content شده است تا محتویاتش به عنوان محتویات پنجره پیش نمایش استفاده شود.نکته مهمIE فقط Web Sliceهایی که روی یک Web Server هستند را نمایش خواهد داد. بنابراین برای طراحی و امتهان Web Sliceها، سایت شما باید روی IIS یا یک فضای واقعی میزبانی شود.و در پایانمبحث Web Sliceها به همین موارد ختم نمی شود و شامل مباحث پیشرفته تری مانند کنترل زمان به روز رسانی و آگاه سازی کاربر، منابع به روز رسانی تناوبی، کنترل Style پنجره پیش نمایش، ویژگی Bookmark برای هدایت کاربر به صفحه دیگر، اعتبار سنجی کاربر و ... می شود که برای جلوگیری از طولانی شدن این پست تحقیق در مورد آنها را به خودتان می سپارم. https://royagar.com/notes/30-12-1/web-sliceها-در-internet-explorer-80 آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Mon, 16 Sep 2019 13:19:32 +0430 https://virgool.io/@royagar/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B1-%D9%BE%D8%A7%DB%8C%D9%87-%D9%88%D8%A8-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF-%D9%87%D8%A7-ggr0pjc7j5jr وب استانداردهایک وب سایت استاندارد به سایتی اطلاق می شود که صفحات آن سازگار و بر پایه توصیه های ائتلاف وب جهان گستر (W3C) ساخته شده است در تقابل با صفحات وبی که بصورت انحصاری و اختصاصی بر پایه خصوصیات محصول یک شرکت خاص ساخته شده باشد.این توصیه ها ترکیبی هستند از روشهای بروزی که از امکانات استاندارد شده امروزی مرورگرهای کنونی استفاده می کنند در تقابل با تکیه به امکانات مرورگرهای قدیمی تر که با هم متناقص و ناسازگار بودند. قرار دادن متنی مبتنی بر اینکه این سایت برای Internet Explorer طراحی شده و یا در این وضوح تصویری به بهترین حالت دیده می شود موضوعی است مربوط به گذشته. همچنین وب استانداردها بخاطر مزایای دیگری مانند دسترسی پذیری بهتر برای دیگر واسط ها به نفع کاربر، شرکت و تیم طراح وب هستند که به تدریج درباره آن صحبت خواهیم کرد.رابط کاربری وببعضی فکر می کنند یک صفحه وب، یک واسط دیداری است که سعی می کند محتویات یک سند را بصورت زیبا از لحاظ بصری عرضه کند. حال این صفحه می تواند شامل اطلاعات مورد نیاز کاربر باشد یا نه. از دیدگاه تکنیکی یک صفحه وب شرح و تفسیر یک سند است. از کنار هم قرار گرفتن صفحات وب، یک وب سایت شکل می گیرد که از رابط کاربری خود برای تعامل با کاربر بهره می گیرد.رابط کاربری یک وب سایت شامل همه متون، تصاویر و دستورات قالب بندی و تعاملی و کنترلهایی است که از سمت وب سرور توسط اینترنت فرستاده شده اند که بواسطه یک مرورگر وب به کاربر می رسند. تعامل کاربر با این رابط از طریق کلیک کردن روی موضوعات و یا تایپ کردن متون برقرار می شود که درنتیجه نتایج دوباره به سمت وب سرور بازگردانده شده و این چرخه تکرار می گردد.در مقایسه، برنامه نویسی سمت سرور که شامل کدنویسی، Business Logic و تقابل با بانک اطلاعاتی است غالباً تولید کننده رابط کاربری سمت کاربر است. به همین روش این رابط کاربری است که دستورات و ورودیهای کاربر را به سمت سرور می رساند. این فرایند گویای فراگیری و اهمیت رابط کاربری در تمام جنبه های طراحی یک وب سایت است.حال برای بررسی، عوامل اصلی و سازنده ساختار رابط کاربری سایت را می توان به سه بخش یا لایه محتوی (Content Layer)، لایه نمایش (Presentation Layer) و لایه رفتار (Behavior Layer) تقسیم بندی کرد.لایه محتوی (Content Layer)این لایه شامل اطلاعاتی است که در XHTML و یا HTML بصورت معتبر و معنی گرا در غالب عنوان، زیر عنوان، پاراگراف، لیستهای عددی، تعریفی و ... جاسازی شده است که مؤلف قصد دارد به بیننده انتقال دهد. امروزه بیشترین محتویات وب، متون هستند ولی همچنین می توانند شامل تصاویر، ویدئو، صدا و هر چیزی که مؤلف قصد انتشار آن را دارد باشند.همچنین این لایه می تواند شامل ساختار اضافی مورد نیاز طراح باشد. به عنوان مثال محتوی (Contents) و بخش ناوبری (Navigation) سایت ممکن است بصورت زیر با استفاده از تگ های (برچسپ های) مناسب مشخص گردد.<div id="content"> content goes here </div><!-- // content --> <div id="navigation"> navigational menu goes here </div><!-- // navigation -->محتویات معتبر valid و معنا گرا Semanticهمانطوریکه گفته شد اطلاعات در لایه محتوی توسط زبان XHTML و یا HTML بواسطه Markup که مجموعه ای از تگ ها هستند نمایش داده می شوند. Markup هنگامی معتبر است که شامل خطا (مانند فراموشی بستن تگ پایانی) و یا تگ غیر مجاز (مانند استفاده از مشخصه height در تگ table که در XHTML مجاز نیست) نباشد. همچنین Markup هنگامی معنی گراست که تگ های انتخاب شده دقیقاً بر پایه کاربرد حقیقی آن تگ استفاده شده باشند. بطور مثال، استفاده از h1 تنها برای نمایش مهمترین عنوان در صفحه و نه برای نمایش دادن چیزی بصورت بزرگ و Bold.لایه نمایش (Presentation Layer)لایه نمایش، مشخص می کند که محتوی چگونه برای بیننده ای که معمولاً از طریق یک مرورگر به صفحه وب دسترسی دارد ظاهر شود. روش عادی مشاهده محتویات یک سایت، یک مرورگر وب است. اما این تنها یکی از روشهای بیشمار دسترسی به محتویات وب است. به عنوان مثال محتویات می توانند به ترکیبی کلامی برای افرادی که دارای مشکلات بینایی هستند تبدیل گردند.زبان نمایش CSS برای قالب بندی صفحه، کنترل متون، جایگیری ها، رنگ و غیره در صفحه بکار می رود. CSS اغلب اوقات می تواند جایگزینی برای Layout های (طرح بندی) قدیمی و تگ های غیر استاندارد و اتلاف کننده پهنای باند مانند مثال زیر باشد:<td bgcolor="#FFCC00" align="left" valign="top"> <br><br><br>  </td>با جدا کردن لایه نمایش از لایه محتوی امکان تغییر هر لایه بدون تأثیر گذاری بر لایه دیگر وجود خواهد داشت. به عنوان مثال شما می توانید یک Layout را در چندین صفحه بکار ببرید و یا متون و لینکها را بدون تغییر در Layout اصلاح کنید. شما و یا مشتری قادر هستید محتویات XHTML سایت را بدون نگرانی در مورد شکستن Layout سایت تغییر دهید. زیرا متن فقط متن ساده است و وظیفه تعیین نحوه نمایش به عهده آن نیست. شما می توانید Layout را بدون دستکاری Markup تغییر دهید. اگر به این نتیجه رسیدید که اندازه فونت متون سایت شما خیلی کوچک است، قائده ای (Rule) را در Style Sheet سراسری سایت اصلاح می کنید و کل سایت تغییر را فوراً منعکس خواهد کرد. آیا به یک نسخه مناسب برای چاپ از صفحات نیازمندید؟ یک Style Sheet برای واسط چاپ بنویسید و صفحات شما به زیبایی چاپ خواهند شد.مزایای جدا کردن لایه نمایش از محتویهمه Style ها در تعدادی Style Sheet محدود نگهداری خواهد شد. در نتیجه فرایند نگهداری سایت آسان ترخواهد بود. اصلاح یک فایل CSS ساده تر از ویرایش صدها و یا هزاران فایل HTML است!صرفه جویی کلی در پهنای باند. از آنجایی که Style Sheet ها در اولین درخواست در مرورگرها ذخیره (Cache) می شوند در درخواستهای بعدی برای هر صفحه استفاده خواهند شد. حذف کامل Markup های نمایشی از صفحات وب در بسیاری از موارد باعث به نصف رسیدن حجم صفحه خواهد شد و بخاطر استفاده از پهنای باند و فضای ذخیره سازی کمتر این کاملاً به نفع مالک سایت خواهد بود. همینطور بینندگان صفحه سریع تری را تجربه خواهند کرد.جدایی محتویات از عناصر نمایشی قابلیت استفاده مجدد از محتوی را برای اهداف دیگر آسان خواهد کرد. مانند RSS Feed ها و تبدیل متن به کلام (Text to Speech).قوائد نمایشی جدا شده می تواند برای خروجی در واسط های مختلف بکار گرفته شود. در نتیجه ما مجبور به طراحی نسخه ای مجزا از هر صفحه برای واسط چاپ و یا دستگاههای همراه نخواهیم بود. می توانیم به سادگی یک فایل CSS جدید برای کنترل نحوه چاپ یا نمایش آن صفحه بنویسیم.و از دیگر مزایای جدایی لایه نمایش از محتوی می توان به سهولت دسترسی پذیر کردن محتویات سایت،بهینه سازی برای موتور های جستجو، سازگاری بیشتر بین مرورگرها و افزایش شانس خوانایی متن توسط مرورگرهای نسل بعدی اشاره کرد.لایه رفتار (Behavior Layer)این لایه مسئول فعل و انفعالات بلادرنگ کاربر با سند است که معمولاً این وظیفه با جاوا اسکریپت مدیریت می شود. این فعل و انفعالات می توانند هر چیزی باشند از یک معتبر سازی جزئی برای اطمینان از اینکه کاربر فیلد های مورد نیاز را قبل از ارسال صفحه کامل کرده است تا برنامه های کاربردی تحت وبی که دقیقاً مانند برنامه های عادی Desktop رفتار می کنند. نسخه استاندارد جاوا اسکریپت امکان ساختن افکت های حرفه ای را که در تمام پلت فرم ها و مرورگرها بطور یکسان کار کنند را به شما خواهد داد.نتیجه گیریطراحی مطابق با وب استانداردها در سمت کاربر به معنی جدایی کامل محتویات سایت از خصوصیات نمایشی و رفتار تعیین شده برای عناصر رابط کاربری و همچنین در سمت سرور به معنی جلوگیری از تولید کدی است که با این ساختار صدمه زده و موجب تداخل کد مربوط به برنامه کاربردی و رابط کاربری بشود. به زودی پستی در مورد وب استانداردها در سمت سرور و مهار کردن ASP.NET برای رسیدن به سایتی استاندارد خواهم داشت. https://royagar.com/notes/29-12-1/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B1-%D9%BE%D8%A7%DB%8C%D9%87-%D9%88%D8%A8-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF-%D9%87%D8%A7 آژانس دیجیتال رویاگر آژانس دیجیتال رویاگر Thu, 15 Aug 2019 22:49:43 +0430