اشتراکها
قبل شروع این قسمت بد نیست با یک سری از وبلاگهای اعضای تیم Oslo آشنا شویم:
در ادامهی مثال قسمت قبل، اکنون میخواهیم entity جدیدی به نام Project را به مدل اضافه کنیم:
//mschema to define a Project type
type Project
{
ProjectID : Integer64 = AutoNumber();
ProjectName : Text#25;
ConectionStringSource : Text;
ConectionStringDestination : Text;
DateCompared: DateTime;
Comment: Text?;
ProjectOwner: ApplicationUser;
} where identity ProjectID;
//this will define a SQL foreign key relationship
ProjectCollection : Project* where item.ProjectOwner in ApplicationUserCollection;
set xact_abort on;
go
begin transaction;
go
set ansi_nulls on;
go
create schema [Test1];
go
create table [Test1].[ApplicationUserCollection]
(
[UserID] bigint not null identity,
[FirstName] nvarchar(max) null,
[LastName] nvarchar(25) not null,
[Password] nvarchar(10) not null,
constraint [PK_ApplicationUserCollection] primary key clustered ([UserID])
);
go
create table [Test1].[ProjectCollection]
(
[ProjectID] bigint not null identity,
[Comment] nvarchar(max) null,
[ConectionStringDestination] nvarchar(max) not null,
[ConectionStringSource] nvarchar(max) not null,
[DateCompared] datetime2 not null,
[ProjectName] nvarchar(25) not null,
[ProjectOwner] bigint not null,
constraint [PK_ProjectCollection] primary key clustered ([ProjectID]),
constraint [FK_ProjectCollection_ProjectOwner_Test1_ApplicationUserCollection] foreign key ([ProjectOwner]) references [Test1].[ApplicationUserCollection] ([UserID])
);
go
insert into [Test1].[ApplicationUserCollection] ([FirstName], [LastName], [Password])
values (N'user1', N'name1', N'1@34')
;
insert into [Test1].[ApplicationUserCollection] ([FirstName], [LastName], [Password])
values (N'user2', N'name2', N'123@4')
;
insert into [Test1].[ApplicationUserCollection] ([FirstName], [LastName], [Password])
values (N'user3', N'name3', N'56#2')
;
insert into [Test1].[ApplicationUserCollection] ([FirstName], [LastName], [Password])
values (N'user4', N'name4', N'789@5')
;
go
commit transaction;
Go
نکته:
جهت آشنایی با انواع دادههای مجاز در زبان M میتوان به مستندات رسمی آن مراجعه نمود:
The "Oslo" Modeling Language Specification
اکنون قصد داریم همانند مثال قسمت قبل، تعدادی رکورد آزمایشی را برای این جدول تعریف کنیم:
ProjectCollection
{
Project1{
ProjectName = "My Project 1",
ConectionStringSource = "Data Source=.;Initial Catalog=MyDB1;Integrated Security=True;",
ConectionStringDestination = "Data Source=.;Initial Catalog=MyDB2;Integrated Security=True;",
Comment="Project Comment",
DateCompared=2009-01-01T00:00:00,
ProjectOwner=ApplicationUserCollection.User1 //direct ref to User1 (FK)
},
Project2{
ProjectName = "My Project 2",
ConectionStringSource = "Data Source=.;Initial Catalog=MyDB1;Integrated Security=True;",
ConectionStringDestination = "Data Source=.;Initial Catalog=MyDB2;Integrated Security=True;",
Comment="Project Comment",
DateCompared=2009-01-01T00:00:00,
ProjectOwner=ApplicationUserCollection.User2 //direct ref to User2 (FK)
}
}
ادامه دارد ...
اشتراکها
دوره توسعه asp.net mvc
در ادامه دوره مقدماتی mvc که قبلا در سایت به اشتراک گذاشته شده بود.دوره جدیدی رو مایکروسافت منتشر کرده با عنوان توسعه برنامههای MVC که سرفصلهای آن را در بخش زیر مشاهده میکنید:
Mod 01: Introduction to MVC 4 Mod 02: Developing ASP.NET MVC 4 Models Mod 03: Developing MVC 4 Controllers Mod 04: Developing ASP.NET MVC 4 Views Mod 05: Integrating JavaScript and MVC 4 Mod 06: Implementing Web APIs Mod 07: Deploying to Windows Azure Mod 08: Visual Studio 2013/MVC 5 Sneak Peek
اشتراکها
سری آموزشی مقدمات Typescript
زیرنویسهای فارسی قسمت دوم را اینجا می توانید دریافت کنید.
این قسمت به نحوه ایجاد کنترلرها و بررسی شیء scope و چگونگی تعامل کنترلر با شیء scope و همچنین نحوه ارتباط کنترلر با صفحه و اینکه چگونه دادهها توسط مکانیزم Binding در خروجی نمایش داده میشوند میپردازد، همچنین نحوه مدیریت رخدادها و چگونگی مدیریت این رخدادها در انگولار و کار با عبارات (سینتکس) در انگولار مورد بررسی قرار خواهد گرفت، سپس بعد از بررسی چندین مثال در این رابطه به بررسی فیلترها و چگونگی ساخت فیلترهای سفارشی میپردازد، در نهایت در رابطه با سیستم اعتبارسنجی توکار انگولار صحبت خواهد شد.
لیست سرفصلهای قسمت دوم به شرح زیر است :
01-Introduction 02-Controllers and Scope 03-Demo. Controllers 04-Demo. Displaying Repeating Information 05-Demo Handling Events 06-Built-in Directives 07-Event Directives 08-Other Directives - Part 1 09-Other Directives - Part 2 10-IE Restrictions 11-Expressions 12-Filters 13-Built-in Filters 14-Writing Custom Filters 15-Two Way Binding 16-Demo. Two Way Binding 17-Validation
همچنین مثالهای جالبی در این بخش مورد بررسی قرار میگیرد، به طور مثال در بخش مربوط به مدیریت رخدادها یک سیستم امتیازدهی ساده مورد بررسی قرار میگیرد.
در این مطلب نکات کار با تصاویر را توسط افزونهی Web Esstentials بررسی میکنیم. این افزونه قابلیتهای زیر را در کار با تصاویر در اختیار شما قرار میدهد:
بهینهسازی تصاویر
یکی از موارد مهمی که باید مورد توجه قرار بگیرد، استفاده از تصاویر کم حجم در وبسایت میباشد. روشهای مختلفی جهت بهینهسازی تصاویر مورد استفاده در سایت وجود دارند، به طور مثال جهت بهینهسازی تصاویر PNG میتوانید از ابزار PNGGauntlet استفاده کنید. همچنین اینجا نیز یک ابزار آنلاین موجود میباشد. افزونهی Web Essentails این قابلیت را به آسانی در اختیار شما قرار میدهد؛ اینکار را میتوانید توسط این افزونه به روشهای زیر انجام دهید:
- کلیک راست بر روی تصویر
برای اینکار بر روی فایلی که میخواهید optimize کنید، کلیک راست کرده و از منوی ظاهر شده گزینه Web Essentials و سپس Optimize Image را انتخاب کنید:
در قسمت status bar نیز میتوانید نتیجه را مشاهده کنید:
- انتخاب چندین تصویر
روال قبلی را میتوانید برای چندین فایل انتخاب شده و یا یک پوشه تکرار کنید:
- بهینهسازی تصاویر موجود در فایلهای CSS
همچنین امکان بهینهسازی تصاویر داخل فایلهای CSS نیز توسط این افزونه امکان پذیر است:
همانطور که در تصویر فوق مشاهده میکنید میتوانیم تصاویری که به صورت Data Uri درون کد پیوست شده اند را با کلیک بر روی Save to file به صورت یک فایل ذخیره کنیم.
ایجاد تصاویر Sprite
یکی دیگر ار قابلیتهای افزونه Web Essentials امکان تهیه تصاویر به صورت Sprite می باشد. برای اینکار کافی است به این صورت عمل کنید:
بعد از کلیک بر روی Create image sprite باید یک نام برای آن تعیین کنید و سپس بر روی کلید Save کلیک کنید. با اینکار یک فایل از نوع XML با پسوند sprite برای شما ساخته خواهد شد:
<?xml version="1.0" encoding="utf-8"?> <sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd"> <settings> <!--Determines if the sprite image should be automatically optimized after creation/update.--> <optimize>true</optimize> <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.--> <orientation>vertical</orientation> <!--File extension of sprite image.--> <outputType>png</outputType> <!--Determin whether to generate/re-generate this sprite on building the solution.--> <runOnBuild>false</runOnBuild> <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.--> <fullPathForIdentifierName>true</fullPathForIdentifierName> <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).--> <useAbsoluteUrl>false</useAbsoluteUrl> <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForCss /> <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForLess /> <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForScss /> </settings> <!--The order of the <file> elements determines the order of the images in the sprite.--> <files> <file>/Content/Images/01.png</file> <file>/Content/Images/02.png</file> <file>/Content/Images/03.png</file> <file>/Content/Images/04.png</file> </files> </sprite>
به عنوان مثال فایل CSS تصویر فوق به صورت زیر میباشد:
/* This is an example of how to use the image sprite in your own CSS files */ .Content-Images-01 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 0; } .Content-Images-02 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -32px; } .Content-Images-03 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -64px; } .Content-Images-04 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -96px; }
<div class="Content-Images-01"></div> <div class="Content-Images-02"></div> <div class="Content-Images-03"></div> <div class="Content-Images-04"></div>
استفاده از تصاویر Data URIs
یکی دیگر از روشهای کاهش درخواستهای HTTP در یک سایت استفاده از Data URIs می باشد، توسط این روش میتوانید فایل هایتان را درون HTML و یا CSS قرار دهید یا به اصطلاح embed کنید. به طور مثال جهت استفاده از یک تصویر میتوانید به راحتی با آدرس دهی تصویر درون تگ img، تصویر را درون صفحه نمایش دهید:
<img src="https://www.dntips.ir/images/logo.png" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
سینتکس Data URIs
به طور مثال تگ زیر را در نظر داشته باشید:
<img src="data:image/png;base64,iVBOR..." />
data: نام schema
image/png: نوع محتوا(content type)
base64: نوع encoding استفاده شده برای encode کردن اطلاعات
iVBOR...: اطلاعات encode شده.
توسط افزونه Web Essentials به راحتی میتوانید تصویر موردنظرتان را به صورت Data URI تهیه کنید:
برخلاف تصور عموم، کاربرد اصلی دات نت فریم ورک در طی این چندین و چند سالی که از ارائه آن میگذرد، در توسعهی گسترده برنامههای دسکتاپ نبوده است. عمده کاربرد آن در تهیه برنامههای وب است. برای نمونه میتوان به آمارگیری زیر سیستمهای مورد استفاده دات نت در بین برنامه نویسها در سال 2010 مراجعه کرد [^] و کاربردهای وب آن را حداقل باید در جمع استفاده از WebForms ، Ajax و MVC جستجو کرد (البته اگر WCF و ASMX را ندید بگیریم که آنها هم عمده کاربردشان در پروژههای وب است). این اعداد و ارقام سال 2010 را اگر بخواهیم از بیشترین به کمترین لیست کنیم، حاصل آن به صورت زیر درخواهد آمد:
01 - WebForms
02 - Ajax
03 - WCF
04 - Linq to SQL
05 - MVC
06 - WinForms
07 - ASMX
08 - Silverlight
09 - WPF
10 - ADO DataSets
11 - Entity-Framework (EF)
12 - Workflow
13 - ADO.NET Data Services
14 - DynamicData
15 - CardSpace
02 - Ajax
03 - WCF
04 - Linq to SQL
05 - MVC
06 - WinForms
07 - ASMX
08 - Silverlight
09 - WPF
10 - ADO DataSets
11 - Entity-Framework (EF)
12 - Workflow
13 - ADO.NET Data Services
14 - DynamicData
15 - CardSpace
مورد دیگری که شاید برای خیلیها جالب توجه باشد، آمار تعداد سایتهایی است که از ASP.NET استفاده میکنند، در مقابل تعداد سایتهایی که بر پایه PHP تهیه شدهاند. مطابق آمار این سایت [^] و [^] در حال حاضر در بین یک میلیون سایت برتر دنیا (سایتهایی که بیشترین ترافیک وب را به خود اختصاص دادهاند) حدود 216 هزار سایت از ASP.NET و 394 هزار سایت از PHP استفاده میکنند. از مابقی وب سایتهای موجود در وب، حدود 27 میلیون سایت از ASP.NET و 26 میلیون سایت از PHP استفاده میکنند. این اعداد و ارقام از این جهت حائز اهمیت هستند که مدت زمان ارائه ASP.NET کمتر از PHP است و همچنین بیشترین کاربرد ASP.NET در سرورهای ویندوزی است، برخلاف PHP که علاوه بر ویندوز، در بین سرورهای لینوکسی نیز گزینهی بسیار محبوبی محسوب میشود.
زیرنویسهای فارسی قسمت چهارم را از اینجا میتوانید دانلود کنید.
در این قسمت به مبحث مسیریابی در انگولار و اهمیت آن جهت ساخت برنامههای تک صفحه ایی یا به اصطلاح SPA پرداخته میشود. همچنین به بررسی اینکه چگونه میتوان با کمک سیستم مسیریابی، برنامهمان را تبدیل به یک برنامه تک صفحهایی کنیم نیز پرداخته میشود. در واقع سیستم مسیریابی به ما کمک میکند یک برنامه تک صفحه ایی را به viewهای مختلفی تقسیم کنیم؛ هر چقدر برنامه درگیر جزئیات بیشتری شود، مدیریت آن نیز به مراتب سختتر خواهد شد. تقسیم برنامه به viewهای مختلف و بارگذاری قسمتهای مختلف برنامه با استفاده از Routing، مدیریت برنامه را برای ما سادهتر خواهد کرد.
لیست سرفصلهای قسمت چهارم به شرح زیر است :
01. Introduction to Routing 02. Websites of Yore 03. Single Page Applications 04. Demo - Adding Your First Route 05. Demo - More Routing and Browser History 06. Demo - Creating a Default Route 07. Demo - Accessing Parameters from the Route 08. Demo - Using the $route Service 09. Demo - Enabling HTML5 Routing 10. Demo - Template and Resolve Properties 11. Demo - Using the $location Service 12. Summary 13. Suggested Exercises
این قسمت ابتدا شما را با ماهیت برنامههای تک صفحه ایی وب آشنا میکند و بعد از آن به بررسی مثالهای عملی در این رابطه خواهد پرداخت. همچنین مواردی ازقبیل Browser History، ایجاد routeهای پیش فرض، افزودن پارامتر به route، استفاده از سرویس $route، فعال سازی سیستم مسیریابی مهیا در HTML5، بررسی پراپرتیهای Template و Resolve، استفاده از سرویس location بخوبی آموزش و به آنها پرداخته میشود.
پ.ن. در مورد نحوهی تهیه اصل ویدیوها در نظرات قسمتهای قبل این سری مطالب، بیشتر بحث شدهاست.
پ.ن. در مورد نحوهی تهیه اصل ویدیوها در نظرات قسمتهای قبل این سری مطالب، بیشتر بحث شدهاست.
تو این ویدیو اول سراغ تاریخچه معماری رفتیم و بعد به این رسیدیم که چرا توی یه جنگلی از اسامی معمارگونه گیر کرده ایم و سعی داریم از این همه اسامی و الگوها و معماریهای مختلف رو طبقه بندی کنیم.
02:30 History of the Software Architecture
16:00 Architecture vs Design
19:00 Software Architecture vs Software Design