There is a myth about white text over black backgrounds being the best color contrast combination for accessibility, but in reality, white text on black backgrounds creates a visual fuzzing effect for people with astigmatism called “halation”. This effect is known to reduce text readability and is particularly bad for people with astigmatism because it can cause terrible headaches.
یکی دیگر از قابلیتهای جدیدی که پس از نصب سرویس پک یک VS 2010 در اختیار علاقمندان خواهد بود، پشتیبانی از HTML5 و CSS3 است.
ابتدا باید آنرا فعال کرد. برای این منظور به مسیر ذیل مراجعه کنید:
Tools -> Option -> Text Editor -> HTML -> Validation
و یا اینکار را از طریق نوار ابزار HTML Source Editing نیز میتوان انجام داد:
به این صورت Intellisense ویرایشگر VS.NET امکان شناسایی و کار سادهتر با عناصر HTML 5 را نیز فراهم کرده؛ همچنین استفاده از مواردی مانند موارد ذیل هم مجاز و بدون مشکل خواهد بود:
<input type="email" runat="server" />
<asp:TextBox type="datetime" runat="server" ID="txtDateTime" />
در مورد CSS3 ...
اگر به منوها مراجعه کنید حتی پس از نصب SP1 نیز به ظاهر خبری از آن نیست! به نظر مدخل رجیستری آن فراموش شده و باید به صورت دستی اینکار صورت گیرد (+):
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas
From there add a Key: Schema 5
Add two string values:
Keyname: File
Value: css30.xml
Keyname: Friendly Name
Value: CSS 3.0
و یا افزونهی CSS 3 Intellisense Schema نیز چنین امکانی را فراهم میسازد (+).
علاوه بر این، سرویس پک یک برنامه Expression Web نیز قابلیتهای ذکر شده را به همراه دارد (+).
آموزش TypeScript #2
برای مثال:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>TypeScript HTML App</title> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="app.js"></script> </head> <body> <h1>Number Type in TypeScript</h1> <div id="content"/> </body> </html>
اما اگر یک پروژه وب نظیر Asp.Net MVC داشته باشیم و میخواهیم یک یا چند فایل که حاوی کدهای typeScript هستند را به این پروژه اضافه کرده و از آنها در صفخات وب خود استفاده کنیم باید به این صورت عمل نمود:
بعد از اضافه کردن فایلهای مورد نیاز، پروژه مورد نظر را Unload کنید. بعد به صورت زیر فایل پروژه(csproj) رو با یک ویرایشگر متنی باز کنید:
بخش دوم target است که مراحل Build پروژه را برای این فایلهای مشخص شده تعیین میکند. برای مثال:
--target ES5
اما به این نکته دقت داشته باشید که ECMAScript 5 در سال 2009 منتشر شده است در نتیجه فقط با مرورگرهای جدید سازگار خواهد بود و ممکن است کدهای شما در مرورگرهای قدیمی با مشکل مواجه شود.
مرورگرهایی که از ECMAScript 5 پشتیبانی میکنند عبارتند از:
- IE 9 و نسخههای بعد از آن؛
- FireFox 4 و نسخههای بعد از آن؛
- Opera 12 و نسخههای بعد از آن؛
- Safari 5.1 و نسخههای بعد از آن؛
- Chrome 7 و نسخههای بعد از آن.
خلاصهای از پروتکل HTTP/2
بانک اطلاعاتی واژههای فارسی
CSS Typesafe با typestyle
چرا vuetify ؟
دلایل زیادی برای استفاده از این framework وجود دارد که از جمله آنها میتوان به مواردی از قبیل رابط کاربری خوب برای طرح بندی صفحه برنامه، پشتیبانی از تمام مرورگرها، پشتیبانی از RTL (راست به چپ کردن صفحه)، پشتیبانی از cli3 و موارد دیگر میتوان اشاره نمود.
روش نصب vuetify
vue add vuetify
ساختار grid
grid برای طرح بندی، یا بخش بندی محتوای برنامه استفاده میشود .vuetify همانند bootstrap، از سیستم بخش بندی 12 تایی برای تقسیم بندی صفحه استفاده میکند. در این روش ما به 5 حالت مختلف میتوانیم صفحه را بخش بندی کنیم:
طریقهی استفاده
ساختار برنامهی ما شامل یک سری از کامپوننتهای از پیش تعیین شده برای راحتی و سادگی کار میباشد که در زیر به آنها اشاره شدهاست.
ساختار برنامه ما باید دارای یک v-container باشد تا به درستی کار کند. این کامپوننت در بر گیرندهی تمام صفحهی برنامه است. هر کامپوننت میتواند تنظیمات خاص خود را داشته باشد.
برای مثال در کد پایین، تنظیم fluid باعث میشود تا کامپوننت v-container تمام عرض صفحهی ما را در بر بگیرد.
<v-container fluid></v-container>
کامپوننت v-layout برای کار با ردیفها مورد استفاده قرار میگیرد که تنظیمات مخصوص به خود را دارد.
برای بخش بندی هر ستون در صفحه میتوان از کامپوننت v-flex استفاده کرد.
نکته: در توضیح کد پایین، در قسمت تعریف v-layout به وسیله row مشخص میکنیم که میخواهیم یک ردیف را ایجاد کنیم و در قسمت تعریف v-flex به وسیله md6 مشخص میکنیم که 6 خانه از 12 خانه موجود در ردیف را میخواهیم در اختیار داشته باشیم:
<v-container> <v-layout row> <v-flex md6> ... </v-flex> <v-flex md6> ... </v-flex> </v-layout> </v-container>
نتیجهی قطعه کد بالا بدین ترتیب است:
به وسیله breakpointها میتوانیم مشخص کنیم که هر المان درون هر مدیا (موبایل، تبلت، کامپیوتر و ...) به چه صورتی نمایش داده شود. در حالت کلی پنج نوع breakpoint وجود دارند که به ترتیب شامل:
<v-flex xs6 sm5> </v-flex>
<v-flex xs5 md8> </v-flex>
<div id="app"> <v-app id="inspire"> <v-container grid-list-xl text-xs-center> <v-layout row wrap> <v-flex xs10 offset-xs1> <v-card dark color="purple"> <v-card-text>xs10 offset-xs1</v-card-text> </v-card> </v-flex> <v-flex xs7 offset-xs5 offset-md2 offset-lg5> <v-card dark color="secondary"> <v-card-text>xs7 offset-(xs5 | md2 | lg5)</v-card-text> </v-card> </v-flex> <v-flex xs12 sm5 md3> <v-card dark color="primary"> <v-card-text>(xs12 | sm5 | md3)</v-card-text> </v-card> </v-flex> <v-flex xs12 sm5 md5 offset-xs0 offset-lg2> <v-card dark color="green"> <v-card-text>(xs12 | sm5 | md5) offset-(xs0 | lg2)</v-card-text> </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>
نتیجهی قطعه کد بالا بدین صورت است:
آموزش Knockout.Js #2
بله امکان پذیر است. باید از المانهای تودرتو استفاده کنیم. به این صورت که المان ریشه با استفاده از with به model مربوطه مقید میشود و المانهای داخلی به خواص مدل bind میشوند. برای مثال:
<div data-bind="text: teacher"> </div>//مقید سازی به مدل اول <p data-bind="with: student">//مقید سازی المان ریشه به مدل دوم Name: <span data-bind="text: name"> </span>,//مقید سازی خواص به المانهای داخلی Family: <span data-bind="text: family"> </span> </p> <script type="text/javascript"> ko.applyBindings({ teacher: "myTeacher", student: { name: "Masoud", family: "Pakdel" } }); </script>
شاید عنوان کنید که کافی است متن ورودی را بر اساس فاصلهی بین کلمات تقسیم بندی کرده و سپس تعداد کلمات بدست آمده را محاسبه کنیم:
var words = text.Split(new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); return words.Length;
[TestMethod] public void TestInvalidChars() { const string data = "To be . ! < > ( ) ! ! , ; : ' ? + -"; Assert.AreEqual(2, data.WordsCount()); }
var words = text.Split( new[] { ' ', ',', ';', '.', '!', '"', '(', ')', '?', ':', '\'', '«' , '»', '+', '-' }, StringSplitOptions.RemoveEmptyEntries); return words.Length;
[TestMethod] public void TestSimpleHtmlSpacesWithNewLine() { const string data = "<b>this is a test.</b>\n\r<b>this is a test.</b>"; Assert.AreEqual(8, data.WordsCount()); }
اگر این موارد را در نظر بگیریم، به کلاس ذیل خواهیم رسید:
using System; using System.Text.RegularExpressions; namespace ReadingTime { public static class CalculateWordsCount { private static readonly Regex _matchAllTags = new Regex(@"<(.|\n)*?>", RegexOptions.IgnoreCase | RegexOptions.Compiled); public static int WordsCount(this string text) { if (string.IsNullOrWhiteSpace(text)) { return 0; } text = text.cleanTags().Trim(); text = text.Replace("\t", " "); text = text.Replace("\n", " "); text = text.Replace("\r", " "); var words = text.Split( new[] { ' ', ',', ';', '.', '!', '"', '(', ')', '?', ':', '\'', '«' , '»', '+', '-' }, StringSplitOptions.RemoveEmptyEntries); return words.Length; } private static string cleanTags(this string data) { return data.Replace("\n", "\n ").removeHtmlTags(); } private static string removeHtmlTags(this string text) { return string.IsNullOrEmpty(text) ? string.Empty : _matchAllTags.Replace(text, " ").Replace(" ", " "); } } }
پس از اینکه موفق به شمارش تعداد کلمات یک متن HTML ایی شدیم، اکنون میتوان این تعداد را تقسیم بر 180 (یک عدد معمول و متداول) کرد تا زمان خواندن کل متن بدست آید. سپس با استفاده از متد toReadableString میتوان آنرا به شکل قابل خواندنتری نمایش داد.
using System; namespace ReadingTime { public static class CalculateReadingTime { public static string MinReadTime(this string text, int wordsPerMinute = 180) { var wordsCount = text.WordsCount(); var minutes = wordsCount / wordsPerMinute; return minutes == 0 ? "کمتر از یک دقیقه" : TimeSpan.FromMinutes(minutes).toReadableString(); } private static string toReadableString(this TimeSpan span) { var formatted = string.Format("{0}{1}{2}{3}", span.Duration().Days > 0 ? string.Format("{0:0} روز و ", span.Days) : string.Empty, span.Duration().Hours > 0 ? string.Format("{0:0} ساعت و ", span.Hours) : string.Empty, span.Duration().Minutes > 0 ? string.Format("{0:0} دقیقه و ", span.Minutes) : string.Empty, span.Duration().Seconds > 0 ? string.Format("{0:0} ثانیه", span.Seconds) : string.Empty); if (formatted.EndsWith("و ")) { formatted = formatted.Substring(0, formatted.Length - 2); } if (string.IsNullOrEmpty(formatted)) { formatted = "0 ثانیه"; } return formatted.Trim(); } } }
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید:
ReadingTime.zip
<script src="jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initializeda() { var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml"); feed.setNumEntries(5); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); feed.load(function (result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>'); } } }); } google.setOnLoadCallback(initializeda); </script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
google.load("feeds", "1");
var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml");
feed.setNumEntries(5); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
feed.load(function (result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>'); } } });
<div id="drupaleasy" class="feeds"> <span>DrupalEasy.ir</span> <ul> </ul> <a href="http://drupaleasy.ir">more</a> </div>
.feeds { float: right; background-color: rgba(234, 242, 243, 0.73); margin: 5px; border-radius: 20px; padding: 8px; width: 293px; height: 217px; border: 1px solid #293883; } #drupaleasy ul { list-style-image: url("img/drupal.png"); }