۷ سال » css 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/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 استفاده از فونت های دلخواه در صفحات وب با Web Fonts و CSS3 http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/using-desirable-fonts-in-web-pages-using-web-fonts-and-css3/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/using-desirable-fonts-in-web-pages-using-web-fonts-and-css3/#comments Wed, 04 Nov 2009 06:03:32 +0000 حامد http://www.7sal.com/?p=303 Continue reading →]]> برای بسیاری از طراحان وب مسئله پیدا کردن فونت (قلم) مناسبی که در عین خوانا و زیبا بودن برای همه قابل استفاده باشد, یعنی در سیستم تمام بازدید کننده ها موجود باشد, یک مسئله جدی و گاها دشوار بوده است. این محدودیت بعضی مواقع سدی در برابر خلاقیت طراحان وب بوده است.

اما اخیرا پیدایش پدیده‌ای به نام Web Fonts این نوید را داده است که به زودی این مشکل نیز از سر راه برداشته خواهد شد و دیگر محدود به استفاده از تعدادی فونت از پیش تعیین شده و تکراری نیستیم.

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

1
2
3
4
5
6
7
@font-face{
font-family:New_font_name;
src:url(http://example.com/path/to/font.ttf);
}
div{
font-family: New_font_name,Tahoma,serif;
}

برای مثال نوشته زیر از فونتی استفاده میکند که به احتمال زیاد در سیستم شما وجود ندارد.

این نوشته از فونتی به نام Mj_Dalal.ttf استفاده میکند.
برای دیدن این متن با قلم مورد نظر باید از مرورگری استفاده کنید که از Web Fonts پشتیبانی میکند. مرورگری مانند FireFox ۳.۵ …

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

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

  1. HoseinHZ:
    2009-Nov-04 ممنون , خیلی جالب و مفید بود ! دنبال همچین چیزی بودم ...
  2. رضا خانی‌پور:
    2009-Nov-04 فقط یه سوال‌؟ در صورتی که مرورگر از این امکان پشتیبانی نکنه چه عکس العملی نشون میده‌؟ به طور طبیعی که باید به فونت ‌Body برگرده‌...
  3. حامد:
    2009-Nov-04 دقیقا به همین صورته که میفرمایید. اگر مرورگری از این قابلیت پشتیبانی نکنه سراغ دیگر فونتهایی که شما معین کردید میره و اگر باز چیزی پیدا نکرد به عنصر مادر رفته و از فونت اون استفاده میکنه. برای مثال اگر شما یک عنصر رو اینگونه براش فونت در نظر بگیرید در صورت عدم پشتیبانی از Web Fonts به سراغ فونت Tahoma میره. font-family: My_Web_Font, Tahoma;
  4. سینا:
    2009-Nov-05 خیلی جالبه ولی خب فعلاً نمیشه زیاد ازش استفاده کرد. وقتی آمار سایت هامون رو بررسی می کنیم، هنوز هم شاهد هستیم که بیشتر کاربران از IE6 استفاده می کنن! ظاهراً فعلاً باید صبر کرد ;)
  5. حامد:
    2009-Nov-05 البته میشه استفاده کرد. مشکلی هم پیش نمیاد. فقط اینکه کاربران IE نمیتونن جلوه های زیبا تایپوگرافی سایت رو تجربه کنن.

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

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/using-desirable-fonts-in-web-pages-using-web-fonts-and-css3/feed/ 8