۷ سال » طراحی وب http://www.7sal.com لینوکس، طراحی وب و فراتر از آن Tue, 20 Dec 2011 12:51:43 +0000 fa hourly 1 نحوه ساخت یک افکت تایپ ساده در جاوا اسکریپت http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/simple-type-effect-in-javascript/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/simple-type-effect-in-javascript/#comments Tue, 24 May 2011 18:42:56 +0000 حامد http://www.7sal.com/?p=772 Continue reading →]]> گاهی اوقات لازمه که بعضی اوقات در صفحات وب از برخی تکنیکهاب خاصی استفاده بشه. در این مواقع اولین راهی که به ذهن اکثر طراح ها میرسه اینه که از یک کتابخانه و کدهای آماده استفاده کنن. اما زمانیکه فقط به یک قسمت ساده از کار احتیاج داریم عملا بارگذاری کل اسکریپت کتابخانه مورد نظر مثل jQuery کاملا بی مورد به نظر میرسه. در این مواقع به نظر پیاده سازی عملیات به صورت مستقل عاقلانه تر خواهد بود.  برای مثال کتابخانه های معروف معمولا هر کدوم به طور متوسط 25 کیلوبایت حجم دارن در حالی که یک تکه کد حد اکثر چیزی بین 3 تا 5 کیلوبایت حجم خواهند داشت.

اما اصل مطلب… افکت تایپ یکی از افکتهای جذاب و پرکاربرد جاوا اسکریپت هستش که میشه با یک کد ساده اون رو پیاده سازی کرد که من در ادامه توضیحات لازم رو دادم.

مرحله اول: ساختار HTML

ابتدا لازمه که ساختار HTML لازم برای کار رو بنویسیم که به صورت زیر هستش.

1
2
<span id="text"></span>
<span id="cur">_</span>

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

مرحله دوم: پیاده سازی جاوا اسکریپت

کد زیر لازم و کافیه که افکت تایپ ما کامل بشه.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type=’text/javascript’>
window.onload = function(){
var text = 'این یک متن ساده است.' // این متنی هست که قراره تایپ بشه.

var i =0;

var textCon = document.getElementById(‘text’); // این قسمت برای ایجاد یک میانبر به تگهای html هستش که از DOM استفاده شده

var cur = document.getElementById(‘cur’);

var timer = setInterval(function(){ // اینجا از تابع setInterval استفاده میکنیم که هر 150 میلی ثانیه کد ما اجرا بشه

textCon.innerHTML = textCon.innerHTML+text[i]; // در اینجا با هر بار فراخوانی یک کاراکتر از متن اصلی به نوشته اضافه میشه

if(i%2 == 0) cur.style.display=’none’; //این خط و خط پایینش هم برای چشمک زدن نشانگرمون هستش

else cur.style.display=’inline’;

i++;

if(i==text.length) {clearInterval(timer);cur.style.display=’none’;} //و در اینجا با کامل شدن متنمون تایمر رو از کار میندازیم.

},150);
}
</script>

نکته مهم اینه که حتما کد بالا بعد از تگهای html قرار بگیره.

نمونه کار رو میتونید اینجا ببینید.

پ.ن: این یک آموزش خلاصه هست برای اونایی که حداقل از اصول جاوا اسکریپت سر در میارن و اینکه هر سوالی هست در خدمتم.

2 دیدگاه برای این نوشته:

  1. a.t.world:
    2011-Jul-26 ba salam man kheyli donbale in code bodam.faghat ye soal chetori mishe chanta matn ro be in code ezafe kard ta be tartib neshon bede? ba tashakor
  2. Goback:
    2011-Oct-25 هو، سلام علیکم، مفید بود دوست عزیز،احسنت. یا حق ج

ارسال نظر سریع

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/simple-type-effect-in-javascript/feed/ 2 با جاوا اسکریپت نقاشی کنید http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/make-interactive-drawings-using-javascript/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/make-interactive-drawings-using-javascript/#comments Wed, 05 Jan 2011 20:12:38 +0000 حامد http://www.7sal.com/?p=707 Continue reading →]]> Raphaelبه عنوان یک طراح وب بسیاری مواقع پیش آمده که در کارهایم به کشیدن انواع نمودارها و تصاویر تعاملی  نیاز پیدا کرده‌ام. برای ایجاد گرافیک ساده  میتوان به راحتی از CSS و HTML استفاده نمود. کارهای کمی پیچیده تر را نیز میتوان با استفاده از جاوا اسکریپت و به کمک کتابخانه های بی نظیرش ماند jQuery ,mootools , scriptacoulus و … انجام داد. اما تا همین چند وقت پیش اگر نیاز به نمودارهای پیشرفته و تعاملی بود راهی به جز استفاده از فلش در صفحات وب وجود نداشت.

اما جدیدا کتابخانه‌ای به جمع کتابخانه های JavaScript پیوسته که حرفهای بسیاری در زمینه گرافیک وب و خصوص گرافیک برداری و یا وکتوری (Vector Graphic) دارد. این کتابخانه که Raphael نام دارد با قابلیتهای بسیار خود جایگزین قدرمتندی برای فلش خواهد بود.

با استفاده از رافائل میتوان انواع و اقسام نمودارها و تصاویر تعاملی را تنها با استفاده از کد ایجاد کرد. Raphael با کمک گیری از قابلیتهای جدید HTML5 و فرمت تصویر SVG از تمامی مرورگرهای مدرن پشتیبانی کرده و با قابلیت انعطاف بالای خود میتواند به راحتی با انواع کتابخانه های دیگر ترکیب شده و قابلیتهایی از جمله انیمیشن را نیز پیاده سازی کند. برای دیدن قابلیتهای بی نظیر این کتابخانه میتوانید از دموهای متنوعی که در سایت اصلی رافائل قرار داده شده دیدن کنید.

Raphael Demos

برای ورود به وبسایت سازنده Raphael روی این لینک کلیک کنید.

ارسال نظر سریع

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/make-interactive-drawings-using-javascript/feed/ 0 بهینه سازی و افزایش سرعت سایت در شش مرحله http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/how-to-speed-up-your-sites/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/how-to-speed-up-your-sites/#comments Wed, 01 Sep 2010 20:52:03 +0000 حامد http://www.7sal.com/?p=676 Continue reading →]]> تکنیکهای بسیاری برای بهبود سرعت بارگزاری صفحات وجود دارند که با یک جستجوی ساده در گوگل بهترین نتایج را خواهید دید. مسلما نوشتن این پست نیز تکرار مکررات است اما از آن مکرراتی است که باید بارها تکرارش کرد. متاسفانه در صنعت طراحی وب سایت ایران,  تعداد کمی از طراحان وب آگاهی کاملی از جنبه های مختلف طراحی سایت از کدنویسی بهینه گرفته تا تنظیمات مربوط به سرور دارند و تعداد کمتری این دانسته ها را واقعا به کار میگیرند. در این مطلب تکنیکهای را معرفی خواهم کرد که به چشم تاثیراتش را در سایتهای مختلف دیده ام.

به کار انداختن فشرده سازیGZIP

با یقین میگویم که این مورد مهمترین موردی است که در این مطلب میخوانید. gzip که مخفف Gnu Zip میباشد ابزاری برای فشرده سازی انواع مختلف فایل است که گاها میتواند تا حدود ۸۰ درصد از حجم صفحات وب شما بکاهد. اگر برای فایلهای js و css خود این قابلیت را فعال کنید کاهش حجم زیادی را در صفحات خود خواهید و در اینترنت کاهش حجم یعنی سرعت و سرعت یعنی همه چیز.

برای فعال کردن gzip در سرورهای apache میتوانید تکه کد زیر را  به فایل .htaccess که در روت هاست شما وجود دارد اضافه کنید.

1
2
3
4
5
6
7
8
9
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
1
SetOutputFilter DEFLATE

 
برای اینکه بدانید gzip در صفحات شما فعال است یا خیر میتوانید از این سایت استفاده کنید.

افزودن http Expire Headers

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

برای فعال سازی کش از طریق سرور باید خطوط زیر را به فایل .htaccess خود اضافه کنید.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# cache images and flash content for one month
<filesmatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=2592000"
</filesmatch>

# cache text, css, and javascript files for one week
<filesmatch ".(js|css|pdf|txt)$">
Header set Cache-Control "max-age=604800"
</filesmatch>

# cache html and htm files for one day
<filesmatch ".(html|htm)$">
Header set Cache-Control "max-age=43200"
</filesmatch>

# implement minimal caching during site development
<filesmatch "\.(flv|gif|jpg|jpeg|png|ico|js|css|pdf|swf|html|htm|txt)$">
Header set Cache-Control "max-age=5"
</filesmatch>

# explicitly disable caching for scripts and other dynamic files
<filesmatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</filesmatch>

 

 

استفاده از سرورهای تحویل محتوا (Content Delivery Networks)

cdn ها کارشان این است که فایلهایی را که استفاده زیادی در وبسایتهای امروزه دارند را در خود جای دهند و در موقع نیاز انها را به کاربر تحویل دهند. برای مثال کتابخانه جاوا اسکریپت JQuery را تصور کنید. کتابخانه‌ی بسیار معروفی که سیستم ورد پرس و بسیاری از سیستمهای دیگر به طور پیشفرض از آن استفاده میکنند. شما میتوانید به جای اینکه این فایل ها را از درون هاست خود در سایتتان استفاده کنید از آدرس زیر استفاده کنید.

1
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

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

ترکیب کردن جاوا اسکریپت و CSS در یک فایل

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

بهینه سازی تصاویر

به جرات میتوان گفت امروزه تصاویر بیشترین حجم صفحات وب را بخود اختصاص داده اند و روزانه هزاران گیگابایت پهنای باند را مصرف میکنند. تصاویری که گاها بدلیل استاندارد نبودنشان برای وب حجمی بسیار بیشتر از آنچه نیاز دارند اشغال میکنند. در بسیاری موارد میتوان حجم تصاویر را تا ۸۰ درصد بدون افت کیفیت کاهش داد. ابزارهای زیادی نیز برای اینکار موجود هستند. درسیستمهای لینوکسی دو ابزار بسیار مفید jpegoptim و optipng میتوانند تعداد زیادی تصویر را در زمان کمی بدون افت کیفیت بهینه کنند. برای ویندوز نیز ابزارهای مخصوصی وجود داردند.+ + +

کوچک کردن JavaScript و CSS

فایلهای css و js اگر به همان صورتی که نوشته میشوند استفاده شوند دارای فاصلها و خطوط بسیاری هستند که اینها نیز به خودی خود فضا اشغال میکنند. میتوانید با استفاده از ابزارهایی مشابه این ابزار فایلهای css خود را فشرده کنید. فایلهای جاوا اسکریپت هم قابلیت فشرده سازی دارند. با استفاده از این ابزار میتوانید کدهای جاوا اسکریپت خود را به اصطلاح pack کنید. با اینکار دو نشان را با یک تیر زده اید. هم  کدهای خود را از شر دزدی حفظ کرده اید و هم آن را فشرده کرده اید.

 

و در آخر این نکته را متذکر میشوم که گرچه افزایش سرعت برای سایتها بسیار مفید خواهد بود اما نباید محتوا را فدای سرعت کرد. به یاد داشته باشید محتوای خوب ارزش منتظر ماندن را خواهد داشت.

14 دیدگاه برای این نوشته:

  1. میثم:
    2010-Sep-02 این gzip چطور عمل می کنه؟ منظورم اینه که فایل فشرده رو به مرورگر میده مثلن یا ...؟
  2. حامد:
    2010-Sep-02 الگوریتم gzip که با نام DEFLATE نیز شناخته میشود با حذف بیتهای تکراری حجم اطلاعات رو کم میکنه. سرور پس فشرده کردن فایلها از این طریق اونها رو با سرفایل Content-Encoding: gzip به مرورگر تحویل میده و مرورگر که از قبل الگوریتم deflate decompressing رو درون خودش داره متوجه میشه که چگونه محتوا رو به نمایش بگذاره. برای طلاعات بیشتر به www.gzip.org مراجعه کنید.
  3. رضا نظريان:
    2010-Sep-08 براي كم كردن حجم فايل هاي css اين وب سايت هم پيشنهاد خوبيه كه من ازش استفاده مي كنم cleancss.com
  4. مایا:
    2010-Sep-10 با GZIP موافقم، مرسی از معرفی این تکنیک ها
  5. milad:
    2010-Sep-10 سلام دوست عزیز خسته نباشید من همیشه مطالب سایت شما رو دنبال میکنم من برای نوشتن مقالات وبلاگم از گوگل داک استفاده میکنم نزدیک 10 روز هست که باز نمیشه با ف*ی$لت.ر ش.ک.ن باز میشه ولی به صورت عادی باز نمیشه میدونم این مسئله ربطی به این مطلب شما نداره گفتم از شما دلیلشو بدونم ممنون برقرار باشید

ارسال نظر سریع | مشاهده‌ 9 نظر دیگر

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/how-to-speed-up-your-sites/feed/ 14 ۱۵۰۰۰ Cheat Sheet برای توسعه دهندگان http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/15000-cheat-sheets-for-developers/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/15000-cheat-sheets-for-developers/#comments Mon, 12 Jul 2010 15:48:43 +0000 حامد http://www.7sal.com/1389/04/21/ Continue reading →]]> اگر مطلب قبلی من در مورد Cheat Sheet ها را خوانده باشید حتما میدانید که این به اصطلاح برگه تقلب ها چیستند. به طور خلاصه Cheat Sheet ها راهنما های سریع و جامعی هستند که معمولا سعی میکنند در یک صفحه اطلاعات لازم و کاربردی در مورد یک موضوع مخصوصا زبان های برنامه نویسی را به ما بدهند.

در مطلب قبل تعدادی برگه تقلب را برای شما معرفی کردم. اما اینبار قصد دارم منبعی را به شما معرفی کنم که با استفاده از آن به بیش از ۱۵۰۰۰ Cheat Sheet در موضوعات مختلف دسترسی پیدا خواهید کرد.

devcheatsheet.com

سایت devcheatsheet.com منبعی است که در آن از موضوعات گوناگون تعداد زیادی Cheat Sheet گردآوری شده و در اختیار کاربران قرار گرفته است. در این سایت میتوانید برگه های تقلبی از زبانهای برنامه نویسی مانند C/C++ , PHP, JavaScript گرفته تا تکنیکهای مختلف برنامه نویسی, کتابخانه های متنوع, سیستم عامل, امنیت و بسیاری موضوعات دیگر بیابید.

3 دیدگاه برای این نوشته:

  1. Hesam:
    2010-Jul-12 همچین هم مطلب قبلی نیس ، نزدیک یه سال پیش هس. . . ممنون - ببینم به دردم می خوره یا نه
  2. مهدي رادي:
    2010-Jul-16 بسيار عالي يه مدتي بود دنبال همينا بودم دستت طلا
  3. محمد جعفر:
    2010-Aug-05 آخ جون من عاشق چیت شیتم! خیلی کار رو سریع و دقیق می‌کنه

ارسال نظر سریع

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/15000-cheat-sheets-for-developers/feed/ 3 چرا طراحان وب نباید تنها کار کنند؟! http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/why-web-designers-should-not-work-alone/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/why-web-designers-should-not-work-alone/#comments Thu, 01 Jul 2010 15:07:24 +0000 حامد http://www.7sal.com/1389/04/10/ Continue reading →]]> مقاله زیر ترجمه‌‌ی قسمتی از مطلب منتشر شده در سایت Smashing Magazine است که مناسب دیدم شما نیز آن را بخوانید.

امروزه به دلیل گستردگی اینترنت و غنی شدن هرچه بیشتر ابزارهای ارایه شده در اینترنت باعث شده تا بتوان بسیاری از کار ها را از راه دور انجام داد و با بسیاری از افراد از سرتاسر دنیا در ارتباط بود. نمونه بارز این گونه استفاده از اینترنت به وجود آمدن پدیده ی کار در خانه است.

طراحی وب نیز یکی از کارهایی است که به راحتی میتوان از درون خانه و پشت کامپیوتر شخصی خود انجام داد. گرچه این استفاده از اینترنت سودهای فراوانی دارد اما نقاط منفی را نیز در پی دارد که در ادامه به آن اشاره میکنم.

خطرات تنها کار کردن

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

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

  • از دست رفتن خلاقیت: حفظ خلاقیت اگر تنها باشید به مرور زمان سخت خواهد بود. معمولا خلاقیت از جمع عده‌ای حاصل میشود که در موضوعات مختلف افکار خود را روی هم میریزند و با هم به بحث و جدل میپردازند. در جمع است که از یک ایده جالب به ایده های جالب دیگر رهنمون میشوید.
  • از دست دادن اعتماد به نفس: معمولا اشخاصی که به تنهایی کار میکنند به مرور زمان دچار کمبود اعتماد به نفس میشوند. اگر کسی را نداشته باشیم که ما را در مواقع لازم تشویق کند و در برابر مشکلات موجود به ما روحیه بدهد ممکن است دچار این عارضه شویم.
  • اعتماد به نفس بیش از حد: مشکل دیگری که به اعتماد به نفس مربوط می‌شود  زیاد بودن  بیش از حد آن است. اگر تنها باشیم ممکن است دچار غرور کاذب شویم, ولی اگر در یک گروه کار کنیم معمولا افرادی پیدا میشوند که همیشه دانسته های ما را به چالش بکشند و ما را به دنبال کسب علم بیشتر بفرستند. همیشه گفته اند که غرور آفت پیشرفت است.
  • ته کشیدن دانسته ها: امروزه فعالیت در هر زمینه ‌ای به قدری گسترده شده که باید محدوده‌ی زیادی از علوم را برای انجام یک کار در اختیار داشت. خوب هیچ کس نمیتواند همه چیز را به تنهایی فرا گیرد و تنها کار کردن باعث میشود که سرانجام به انتهای دانش خود برسیم. در این مواقع است که جای خالی یک همکار به چشم می‌آید.
  • داشتن دید محدود: معمولا هر فرد برای انجام هر کار از زاویه‌ی خاصی به یک مسئله مینگریم. حال اگر به تنهایی کار کنیم مسلما  زوایای دید ما محدود خواهد بود. با شرکت در جمع است که میتوان یک مسئله را از زوایای مختلف بررسی و تحلیل کرد.
  • تحت فشار بودن: معمولا هر کار مشکلات و موانع خود را در پیش دارد. تنها کار کردن باعث میشود که در مقابل مشکلات مختلف احساس ضعف کنیم و در بسیاری موارد ممکن است از ترس شکست به کلی میدان را خالی کرده و بیخیال شویم. در این مواقع داشتن یک پشتیبان میتواند ناجی ما باشد.

حال سوال اینجاست که چگونه میتوان از این مشکلات جلو گیری کرد؟ در زیر تعدادی پیشنهاد موجود است.

  • میتوانید در ازای پرداخت مبلغی یک مشاور برای خود داشته باشید. معمولا کسی که از بیرون به کار شما مینگرد کمک بزرگی برای شناختن مشتریان شما خواهد بود.
  • یا اینکه میتوانید از کسی درخواست راهنمایی کنید. برای مثال شما کار یک طراح خاص را تحسین میکنید و به نوعی از وی الگو میگیرید. چرا از خود استاد نمیپرسید که رمز کارش چیست؟
  • داشتن یک رفیق نیز میتواند راه حل خوبی باشد. شخصی مانند خودتان یک کمک بزرگ خواهد بود.
  • یا اینکه میتوانید از جوامع آنلاین و آفلاین کمک بگیرید. هزاران گروه اینترنتی موجود هستند که حاضرند به شما کمک کنند. سعی کنید گروهی نه چندان بزرگ را انتخاب کنید که حداقل اسم شما را به خاطر بسپارند.

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

13 دیدگاه برای این نوشته:

  1. Hesam:
    2010-Jul-01 منم داشتم همین جوری پله ها رو می و مدم پایین تا پله سوم. اما الان خیلی بهتر شده
  2. علیرضا:
    2010-Jul-01 واقعا همینطوره، ارزش کار گروهی خیلی بیشتره. ولی متاسفانه ما تو کار گروهی یک مقداری ضعیف هستیم.
  3. امیر مومنی اصل:
    2010-Jul-02 سلام و خسته نباشی - بله واقعا کار گروهی باعث میشه که خیلی از مسائل حل بشن و خیلی از موارد هم بهتر بشن - به امید روزی که همه ارزش کار گروهی رو بفهمند و یکه تاز میدان نباشند - در غیر این صورت هم احساس استقلال بیش از حد می کنند و به خاطر غرور کاذبی که بهشون دست میده حتما شکست می خورند - ممنون .
  4. فرشاد غضنفری:
    2010-Jul-02 باز مجدد مسیر ما به اینجا افتاد. آخر شبی طبع شعرم فراخ شد ! کار من در هجر تو دایم نفیر است و فغان شغل من در عشق تو دایم غریو است و غرنگ . مطمئنا در کار گروهی است که افرادی چون شما رشد می کنند و می توانند آینده ای روشن برای خود و بقیه ایجاد کنند . منتظرم کار شما هستیم (ن .ل )
  5. علی:
    2010-Jul-04 بله کار گروهی واقعا خوب است و در بسیاری از شرایط سخت همفکری ها باعث آسان تر شدن کار ها میشود ولی در طراحی وب من عقیده دارم که باید تنها کار کرد یا اگر میخواهیم گروهی کار نکنیم باید بگردیم و افراد شبیه به خود و هم سلیقه پیدا کنیم در غیر این صورت طراحی یک سایت ساده با اختلاف نظر گروه ممکن است ماه ها به طول بینجامد ؛ درست مانند تجربه من!!!!

ارسال نظر سریع | مشاهده‌ 8 نظر دیگر

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/why-web-designers-should-not-work-alone/feed/ 13 خلاصه‌ای از کاربرد ریاضیات در طراحی وب http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/summary-of-maths-usage-in-web-design/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/summary-of-maths-usage-in-web-design/#comments Wed, 17 Feb 2010 08:15:58 +0000 حامد http://www.7sal.com/?p=513 Continue reading →]]> من به شخصه هیچ وقت به ریاضیات علاقه‌ای نداشتم. دلیلش را نمیدانم اما احتمالا این مورد برمیگردد به نحوه تدریس ریاضیات در مدارس ایران. در ایران از همان اول ابتدایی می‌آیند از ساده ترین قوانین ریاضی برای دانش آموزان می‌گویند و به مرور که بچه ‌ها به دوره های بالاتر قدم میگذارند مطالب پیشرفته تری آموزش داده میشود. در دانشگاه ها هم به همین منوال مطالب سنگین پیچیده ریاضی به دانشجو ها خورانده میشود بدون اینکه کاربرد حقیقی این قوانین و رابطه ها را در زندگی روزمره به آنها بگویند. بدون اینکه به آنها بفهمانند این همه درسی که خواندند به چه دردی میخورد.

اما در این مطلب قصد دارم تا رابطه ریاضیات و طراحی وب را هر چند مختصر برای شما شرح دهم. اگر طراح وب هستید به شما توصیه میکنم ادامه مطلب را بخوانید. هرچقدر هم از ریاضی بدتان بیاید قول میدهم این مبحث شیرین خواهد بود.(حداقل برای من که بود!)

نسبت طلایی و مستطیل طلایی

نسبت طلایی یکی شگفتی های عالم ریاضیات است. این نسب که یک ثابت عددی با مقدار تقریبی 1.618033987 است خواص عجیب و شگفت انگیزی دارد. این نسبت را در بسیاری از پدیدهای طبیعی میتوان یافت. در بسیاری از فراکتال های طبیعی این نسب به وفور یافت میشود. مقدار دقیق این نسب اینگونه به دست می‌آید. دو مقدار را در نظر بگیرید. اگر نسبت مجموع دو مقدار به مقدار بزرگتر برابر با نسبت مقدار بزرگتر به مقدار کوچک تر باشد, آنگاه این دو مقدار با هم نسبت طلایی دارند. شکل زیر….

Golden Ratio

Golden Ratio

و اما مستطیل طلایی. مستطیلی که نسب اضلاع آن برابر با نسبت طلایی (تقریبا ۱.۶۱۸) باشد مستطیل طلایی نام دارد. هنرمندان معتقدند کامل ترین و زیباترین مستطیلی که وجود دارد مستطیل طلایی است. در ادامه چگونگی رسم یک مستطیل طلایی آورده شده است.

ابتدا مربعی به طول ضلع ۱ واحد در نظر بگیرید. سپس از نقطه وسط یکی از اضلاع آن به یکی از گوشه های مستطیل وصل کنید. سپس با استفاده از این خط رسم شده به عنوان شعاع منحنی دایره‌ای شکل بکشید که این منحنی طول مستطیل طلایی را مشخص میکند. سپس با رسم اضلاع دیگر, مستطیل طلایی خود را کامل کنید. به شکل زیر توجه کنید.

Golden Rectangle

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

Design using Golden Rectangle

در تصویر زیر مستطیل های طلایی به وضوح مشخص شده‌است.

Design using Golden Rectangle

سری فیبوناتچی

1
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

این سری که تا بی نهایت ادامه دارد این گونه به وجود می‌آید. با شروع از دو عدد ۰ و ۱ هر جمله از این دنباله برابر با مجموع دو جمله پیش از خود است. نکته جالب در این دنباله اعداد این است که هرچه به جلو پیش میرویم نسبت اعداد به نسبت طلایی نزدیک تر میشود. و اما چگونه از این دنباله در طراحی های خود استفاده کنیم. با یک مثال توضیح میدهم.

Fibonacci Design

طرح بالا را در نظر بگیرید. صفحه در میانه به سه قسمت تقسیم شده است. در این طرح اندازه پایه 90px در نظر گرفته شده است که عرض هرکدام از ستون حاصلضرب یکی از اعداد دنباله فیبوناتچی در 90px است. برای مثال ستون اول با عرض 180px حاصل 90×2 است. ستون دوم نیز عرضی برابر با 90×3=270px دارد و همچنین ستون سوم که عرض آن حاصل 90×8=720px است. حتی اندازه نوشته ها نیز از سری فیبوناتچی پیروی میکنند. عنوان صفحه با اندازه 55px, اندازه عنوان مطلب با 34px و اندازه متن مطلب اندازه 21px را دارد.

Fibonacci Design

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

منبع: Smashing Magazine

1 دیدگاه برای این نوشته:

  1. قاسم صباغی:
    2010-Aug-08 سلام از مطالب پربارتان بهره بردم. درصورت نیاز از آنها استفاده خواهم برد.شما را به دیدن وب خود دعدت می نمایم تا با نظرات مفید خویش مرا درراهی که درپیش گرفته ام رهنما باشید . یک معلم ریاضی

ارسال نظر سریع

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/summary-of-maths-usage-in-web-design/feed/ 1 اولین نسخه از سیستم مدیریت محتوای نیوک لرن منتشر شد! http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/nukelearn-usv-stable-release-version-1-has-gone-public/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/nukelearn-usv-stable-release-version-1-has-gone-public/#comments Mon, 08 Feb 2010 18:54:38 +0000 حامد http://www.7sal.com/?p=506 Continue reading →]]> چند ماهی است که علاوه بر فعالیت های جانبی و نوشتن در وبلاگ در سایت نیوک لرن در حال توسعه‌ی نسخه جدید از پرتال محبوب نیوک بودیم که به لطف همت همکاران و مدیر پروژه آقای غضنفری دیروز اولین نسخه پایدار این سیستم برای دریافت عموم منتشر شد. لازم دیدم در این وبلاگ مطلب مختصری در معرفی این سیستم بنویسم.

Nukelearn USV

پرتال NukeLearn که برپایه پرتال IranNuke و برگرفته از پرتال محبوب phpNuke تحت لیسانس OpenSource در اختیار عموم قرار گرفته شده است. ااز نظر ساختاری سعی در بهینه شدن هسته سیستم شده به صورتی که بسیاری از کدهای بی استفاده که به مرور زمان کارآیی خود را از دست داده بودند حذف شده و علاوه بر آن سعی بر این بوده تا پایگاه داده نیز مرتب و سبک گردد.

در سیستم جدید بسیاری از ماژول‌هایی که کاربرد عمومی نداشته از بسته اصلی حذف شده و به صورت پلاگین و جدا ارائه شده است. از این رو شاهد کاهش حجم کل بسته خواهیم بود. همچنین سعی شده در بخش مدیریت سیستم از تکنیک های نوین برنامه نویسی استفاده شود, به صورتیکه بسیاری از قسمتها به صورت آژاکسی در آمده است.

در سیستم قالب های این پرتال نیز تحولی بزرگ ایجاد شده به این صورت که با موتور جدید قالب پرتال, طراحی قالبهای پرتال از آن پروسه سخت و طولانی به کاری بسیار راحت تبدیل شده که بدون هیچ دانش برنامه نویسی و تنها با تکیه بر HTML و CSS میتوان زیباترین قالبها را برای این سیستم طراحی کرد.

تغییرات زیر و درشت بسیاری در این نسخه وجود دارد که در یک مطلب نمیتوان به همه آن اشاره کرد. اما اگر علاقه مند هستید تا با این سیستم و اماکانات آن بیشتر آشنا شوید, به این آدرس مراجعه کنید.

مرجع پرتال Nukelearn

دانلود پرتال نیوک لرن USV نسخه ۱

ارسال نظر سریع

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/nukelearn-usv-stable-release-version-1-has-gone-public/feed/ 0 ساختن تصاویر فضا پرکن به راحتی یک لینک دادن! http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/making-pace-holder-images-as-easy-as-linking/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/making-pace-holder-images-as-easy-as-linking/#comments Fri, 05 Feb 2010 16:04:05 +0000 حامد http://www.7sal.com/?p=501 Continue reading →]]> اگر یک طراح وب باشید به طور یقین با تکه متن “Lorem ipsum” آشنا هستید. تکه متنی که صرفا جهت پر کردن فضاهای خالی در طرح ها خام به کار میرود و هیچ معنای خاصی ندارد. خوب حالا اگر بخواهیم به جای این عبارت بی معنا یک عکس برای نمایش نمونه خود استفاده کنیم راحت ترین کار باز کردن Paint ویندوز و ساختن یک تصویر خالی است. بگذریم که اگر بخواهیم دقیق اندازه گیری کنیم به برنامه‌ای مانند فتوشاپ نیاز داریم.

اما این همه زحمت چرا؟! با سرویس Dummy Image به راحتی میتوان هر تصویری با هر اندازه‌ای را ساخت, به طوریکه ابعاد تصویر نیز به وضوح در خود تصویر درج شده باشد. تنها کار لازم استفاده از آدرس سایت و ابعاد تصویر مورد نظر در انتهای آدرس است.

برای مثال اگر ما یک تصویر نمونه با ابعاد120×400 بخواهیم کافیست از آدرس زیر استفاده کنیم.

http://dummyimage.com/400×120

در آدرس بالا عدد اول عرض تصویر و عدد دوم ارتفاع آن است. از آدرس بالا به راحتی میتوانید در تگ img نیز استفاده کنید که نتیجه زیر را خواهد داشت.

Dummy Image Generator

2 دیدگاه برای این نوشته:

  1. رضا.ب:
    2010-Feb-06 عجب ایده‌ی جالبی... متاسفانه من کم تو وبلاگهای آی‌تی یا خبری نظر میگذارم. اما همیشه شما را می‌خونم و از مطالب خوبتان همیشه استفاده کردم و ممنونم. و بابت اینکه دیر به دیر نظر میگذارم ناراحتم. اما قبول کنید مطالب خام که احساسی درش نیست زیاد فیدبک آنچنانی ندارد. مگر کامنتی که تکمیل کننده باشه یا به‌به چه‌چه...
  2. حامد:
    2010-Feb-06 درود بر شما بنده هم زیاد اهل اظهار نظر در وبلاگ ها نیستم. کلا اهل زیاده گویی نیستم. ولی خوب به عنوان یک وبلاگ نویس میدونم که دادن نظر نویسنده مطلب رو خوشحال میکنه. بنده هم از این قاعده مستثنا نیستم و از نظرات شما خوشحال میشم.

ارسال نظر سریع

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/making-pace-holder-images-as-easy-as-linking/feed/ 2 ۹ مرجعی که توسعه دهندگان وب نباید از دست بدهند! http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/best-online-resources-for-web-developing/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/best-online-resources-for-web-developing/#comments Thu, 04 Feb 2010 16:30:08 +0000 حامد http://www.7sal.com/?p=494 Continue reading →]]> اگر یک برنامه نویس و یا توسعه دهنده هستید قطعا ارزش منابع اطلاعاتی را میدانید. بارها برای من پیش آمده که در کارم به مشکلی برخوردم و یا اینکه دنبال تکنیک خاصی میگشتم اما دریغ از یک منبع خوب که در این مواقع به دادمان برسد. منابع اطلاعاتی میتوانند به هر صورتی باشند. میتوانند یک کتاب باشند, یا بر روی یک دیسک به صورت متن یا چندرسانه‌ای وجود داشته باشند و یا بهتر از هردوی آنها در دنیای آنلاین اینترنت در دسترس باشند. در زیر تعدادی از منابع آموزشی که میتوانند برای یک توسعه دهنده وب و طراح سایت حکم مرجع تقلید! را داشته باشند لیست کرده ام.

w3schools

w3schools

اگر بگویم که w3schools خدای سایتهای آموزشی در زمینه توسعه وب است دروغ نگفته‌ام. این سایت با گردآوری کامل ترین آموزشهای مرحله به مرحله از سطح ابتدایی تا پیشرفته برای تقریبا تمام تکنولوژی هایی که در وب امروز استفاده میشود یکی از بزرگترین منابع برای توسعه دهندگان است. همچنین در این سایت میتوانید به صورت زنده نمونه آموزشها را ببینید و اگر خواستید امتحان بدهید.

A List Apart

A List Apart

پایگاه A List Apart نه تنها مقالات بیشماری در زمینه تکنولوژی های وب مانند HTML, XTML, CSS, JavaScript, XML و … را داراست, بلکه این سایت در زمینه های متفاوت دیگری در زمینه طراحی وب شما را راهنمایی میکند. مانند روش انجام طراحی یک سایت و مدیریت انواع پروژه ها.

webmonkey

WebMonkey

سایت webmonkey با یک سابقه طولانی که به سال ۱۹۹۶ باز میگردد در زمینه طراحی وب فعالیت داشته. این سایت که اکنون به صورت یک wiki در آمده نه تنها شامل آموزش انواع تکنیکها,  بلکه شامل انواع مقالات مرجع و همچنین کتابخانه کد (Code Library) است.

Dev Shed

Dev Shed

Dev Shed در کنار مجموعه بزرگ مقالات آموزشی در زمینه تکنولوژی های وب مانند PHP, ASP, XML, JavaScript و … دارای انجمن های کمکی نیز میباشد که با شرکت در آن میتوانید با پرسش و پاسخ مشکلات خود را حل کنید.

Smashing Magazine

Smashing Magazine

اگر یک سایت بود که این لیست بدون آن کامل نمیشد همین Smashing Magazine بود. حتما قبول دارید که یک وبسایت فقط کد نویسی و افزودن قابلیت نیاز ندارد. ظاهر زیبا یکی از عوامل کلیدی موفقیت یک سایت است. Smashing Magazine با تمرکز بیشتر بر روی جنبه گرافیکی کار به شما یاد میدهد چگونه زیبا فکر کنید و زیبا سایت بسازید.

Developer Tutorials

Developer Tutorials

اگر به دنبال یک منبع برای آموزشهای کاربردی و همچنین کدهای آماده میگردید Developer Tutorials مخصوص شماست. این سایت در هر زمینه‌ای آموزش دارد. از ترفندهای Photoshop گرفته تا آموزشهای مربوط به Java و CSS و … .

Ajaxian

Ajaxian

من به شخصه علاقه خاصی به تکنیکهای Ajax دارم. تکنیکهایی که باعث نزدیکی هرچه بیشتر وب و برنامه های دسکتاپی شده است. اگر دوست دارید در مورد Ajax و DHTML و نحوه کار این اعجوبه‌های جدید وب بیشتر بدانید Ajxian که یک وبلاگ است را به شما پیشنهاد میکنم.

DZone

DZone

سایت DZone همان Digg برای توسعه دهندگان است. این سایت که توسط کاربرانش به روز میشود یک دایرکتوری لینکهای به درد بخور برای طراحان و توسعه دهندگان وب است.

iDevCenter

iDevCenter

اگر DZone حکم سایت Digg را داشت, iDevCenter همان بالاترین ما فارسی زبان هاست منتها مخصوص برنامه نویسها…!

12 دیدگاه برای این نوشته:

  1. mossi:
    2010-Feb-06 good
  2. طراحی سایت:
    2010-Feb-07 مرسی. بسیار مطلب مفید و قابل استفاده ای بود. موفق باشید.
  3. رعنا:
    2010-Feb-07 مطلبی بسیار خوب و مناسب و بجا ، دقیقا دنبال چندتا مرجع خوب میگشتم و البته Smashing Magazine انتخاب اول من بوده و از روی سایت w3schools من css یاد گرفتم اما سایر سیات ها را نمی شناختم ، حتما امتحانش خواهم کرد
  4. صادق:
    2010-Feb-07 جالب بود
  5. ماکرومدیا:
    2010-Feb-07 اینجا رو هم از دست ندین : http://www.persianweblog.ir/weblogs/?cat=7 وبلاگ های برنامه نویسی فارسی

ارسال نظر سریع | مشاهده‌ 7 نظر دیگر

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/best-online-resources-for-web-developing/feed/ 12 کتاب هفته: راهنمای بهینه سازی سایت برای جستجوی گوگل http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/book-of-the-week-googles-search-engine-optimization-starter-guide/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/book-of-the-week-googles-search-engine-optimization-starter-guide/#comments Tue, 29 Dec 2009 17:40:04 +0000 حامد http://www.7sal.com/?p=425 Continue reading →]]> بدون شک امروزه موتور جستجوی گوگل بزرگترین منبع اطلاعات در سرتاسر دنیاست و گوگل نیز این عظمت خود را مدیون سایتهای ماست. اما چرا گوگل به بعضی سایتها توجه خاصی نشان داده و به آنها علاقه دارد و به برخی دیگر بی اعتنایی میکند نیز بخشی از رمز و رازهای این پدیده وب است.

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

و اما چگونه میتوان این اعتبار و رتبه را ارتقا داد. به طور قطع و مسلما اولین و مهمترین عاملی که به میان می‌آید محتوای خوب است. سایتی که محتوای خوب و مفید و هنچنین اصیل که به اصطلاح Genuine به معنای دسته اول را در اختیار کاربر قرار دهد, نیمی از راه را طی کرده است. نیم دیگر راه هم رعایت چند نکته است که در کتاب این هفته به تفصیل بیان شده است.

نام کتاب: Google’s Search Engine Optimization Starter Guide

ناشر: Google Webmaster Central

زبان: انگلیسی

دریافت فایل

ارسال نظر سریع

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/book-of-the-week-googles-search-engine-optimization-starter-guide/feed/ 0