طراحی پاسخگو

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

چند اصل کلی وجود داره در طراحی پاسخگو

1: اسفاده از درصد برای سایز عناصر موجود در صفحه

2: استفاده از Media Queries ها 

لینک های مفید:
responsive-web-design

مقاله فارسی

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

نوشته شده در چهارشنبه ۱۳۴۸/۱۰/۱۱ ساعت ۱۲:۰۰ توسط مهدی باقری | تعداد بازدید ۱۵ | نظر بدهید

زبان LESS

سلام
 دارم یه سری مطالعاتی میکنم روی روش های جدید طراحی وب و ابزار های مرتبط
گفتم که خوبه به بقیه دوستان هم یه اطلاعاتی بدم
خیلی برا خودم جالب بودش حتما یه نگاهی بندازین

زبان پویای شیوه‌نامه ها

به زبان ساده همون css خودمون هست ولی یه سری قابلیت های جالب دیگه بهش اضافه شده.

یکسری قابلیت جدید داخل CSS آورده که بشه راحت تر استایل نوشت برای سایت. که خیلی از پروژه های وب ازش استفاده میکنن مثل جوملا، bootstap , ...

روش استفاده هم خیلی ساده هست دو جور میشه استفاده کرد

1: زبان LESS را در CSS صفحه مون استفاده کنیم بعد فایل مربوط به کامپایل LESS به CSS رو با تگ <link> تو صفحه بزاریم موقعی که صفحه داره لود میشه اسکریپت اجرا شده و فایل LESS رو تبدیل به  CSS میکنه که داخل مرورگر اجرا میشه

2:فایل LESS رو قبل از گذاشتن رو صفحه به CSS کامپایل میکنیم که باز هم توسط همین فایل جاوااسکریپت انجام میشه برای اجرای فایل جاوا اسکریپت هم میتونیم از NodeJS استفاده کنیم.

مراجع:

سایت انگلیسی: http://lesscss.org
سایت فارسی: http://lesscss.ir

این مقاله به مرور زمان آپدیت میشود.

 

نوشته شده در چهارشنبه ۱۳۴۸/۱۰/۱۱ ساعت ۱۲:۰۰ توسط مهدی باقری | تعداد بازدید ۱۶ | نظر بدهید

انتخابگرهای CSS

انتخابگر های CSS یا همان Selector ها از مهمترین و پایه ای ترین قسمت های مربوط به CSS هست

در این آموزش میخواهم چند تای آنها رو معرفی کنم

/* All tags */
*
{
   color:red;
}

/* All p tags */ 
p 
{
   color:blue; 
}

/* Tag with specified id */ 
#title1
{
   color:pink
} 

/* All tags with specified class */ 
.class1 
{ 
   color:green; 
} 

/* All a tags with specified attribute */
a[target] 
{ 
   color: black;
} 
a[target=_blank] 
{ 
   color:yellow;
}

*: انتخابگر تمام عناصر صفحه

p: انتخابگر تگ همنام با آن در اینجا style روی تمام تگ های p اعمال میشود

# : انتخابگر id است یعنی style نوشته شده برروی تگی با id مشخص شده (title1) اعمال میشود

.: انتخابگر class است یعنی style روی تمام تگ هایی که کلاس مشخص شده را دارند (class1) اعمال میشود

[]: ​انتخابگر صفت که در مثال بالا به معنی انتخاب تمام تگ های  a که دارای صفت target میباشند.همان طور که میبینید میشه مقدار صفت رو هم داخل [] قرار بدیم 

 

نکته دیگه ای که باید در نظر گرفته بشه اینه که میتونیم از این انتخابگرها به صورت ترکیبی هم استفاده کنیم 

مثال:

p,a
{
    color:black;
}
#title1,#title2
{
    color:gray;
}
.class1, #title1
{
    color:yellow;
}
.class1,.class2.class3
{
   color:brown ;
}

توضیح مثال: برای استفاده از چند انتخابگر به طور همزمان فقط کافی است بین آنها از "," استفاده کنیم

ادامه دارد . . .

 

نوشته شده در چهارشنبه ۱۳۴۸/۱۰/۱۱ ساعت ۱۲:۰۰ توسط مهدی باقری | تعداد بازدید ۱۴ | نظر بدهید

معرفی سایت های مفید

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

جدول لینک ها

سایت های انگلیسی
سایت پاسخگویی به سوالات http://stackoverflow.com
شبکه اجتماعی مربوط به کار http://www.linkedin.com
پاسخ به سوالات، مقالات کاربردی و نمونه کد به همه زبان ها http://www.codeproject.com
مکانی برای مدیریت واشتراک پروژه های متن باز http://github.com
مکانی برای مدیریت واشتراک پروژه https://bitbucket.org
مکانی برای مدیریت واشتراک پروژه http://sourceforge.net
مکانی برای مدیریت واشتراک پروژه http://www.codeplex.com
یکی از بهترین مراجع آموزش وب http://w3schools.com
آموزشی بسیار ساده از C# - VB - Python - Ruby http://www.dotnetperls.com
یکی از بهترین و حرفه ای ترین وب سایت های آموزشی و متن باز https://developer.mozilla.org
سایت آموزشی با استفاده از تمرین توسط کارآموز http://www.codecademy.com
آموزش های زیادی داره از جمله برنامه نویسی http://www.khanacademy.org
اینم سایتی که تقریبا همه چیز رو آموزش میده https://tutsplus.com
اینم سایتی که بیشتر تمرکزش روی CSS است http://css-tricks.com
ایجاد دکمه های زیبا با CSS http://www.cssbuttongenerator.com
ایجاد دکمه های زیبا با CSS http://www.cssbutton.me
ایجاد دکمه های زیبا با CSS http://www.bestcssbuttongenerator.com
اینم که خیلی جالبه: نوشتن و بازبینی کد های بقیه http://codepen.io
موتور جستجوی آیکن http://findicons.com
موتور جستجوی آیکن https://www.iconfinder.com
موتور جستجوی آیکن http://www.iconarchive.com
پیدا کردن ترکیب رنگ در طراحی ها http://www.colorcombos.com
پیدا کردن ترکیب رنگ در طراحی ها http://www.colormatch5k.com
پیدا کردن ترکیب رنگ در طراحی ها http://www.colourlovers.com
پیدا کردن ترکیب رنگ در طراحی ها https://kuler.adobe.com
سایت های فارسی
بهترین سایت آموزش زبان های مایکروسافتی http://www.dotnettips.info
انجمن فعال برنامه نویس http://barnamenevis.org
آموزش انواع زبان ها http://developer1.ir
آموزش HTML http://html.ir
دانلود آموزش و نمونه کد http://www.sourcebaran.com
دانلود نمونه کد http://sourceiran.com
آموزش http://webgoo.ir

به روز می شود.

نوشته شده در چهارشنبه ۱۳۴۸/۱۰/۱۱ ساعت ۱۲:۰۰ توسط مهدی باقری | تعداد بازدید ۱۶ | نظر بدهید

فریمورک symfony نسخه 3 منتشر شد

بالاخره فریمورک symfony نسخه 3 منتشر شد. symfony یکی از بهترین فریمورک های PHP هست که من به شخصه خیلی دوستش دارم و بیشتر در برنامه های بزرگ ازش استفاده میشه. من خودم دارم از Laravel استفاده میکنم اما از این هم خیلی خوشم میاد و دوست دارم یک پروژه ای باهاش کار کنم

در ضمن یاد آور بشم که laravel قسمت های خیلی زیادیش داره از symfony استفاده میکنه. یکی از دلایلش اینه که symfony از نوع فریمورک های Full Stack نیست. یعنی میشه قسمت های مختلف اش رو به صورت مجزا استفاده کرد و این یکی از برتری های symfony است و این باعث شده که توی خیلی از فریمورک ها و کتابخانه ها بیان از کلاس های سیمفونی استفاده کنند.

توصیه من به جوانان مشتاق این است که حتما یک سری بهش بزنن :) :) 

 

موفق باشید.

نوشته شده در چهارشنبه ۱۳۴۸/۱۰/۱۱ ساعت ۱۲:۰۰ توسط مهدی باقری | تعداد بازدید ۳۳ | نظر بدهید