۷ سال » html 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 کتاب هفته: آموزش HTML http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/book-of-the-week-html-tutorial/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/book-of-the-week-html-tutorial/#comments Mon, 21 Dec 2009 12:36:18 +0000 حامد http://www.7sal.com/?p=411 Continue reading →]]> سلام

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

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

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

HTML

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

  1. امیر:
    2009-Dec-23 سلام-بخش کتاب هفته مبارک باشه-صددرصد میتونه یه بخش کاملا مفیدی باشه-امیدوارم تو این بخش هم موفق باشی.

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

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/book-of-the-week-html-tutorial/feed/ 1 آماده تحول وب باشید; HTML5 در راه است http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/html-5-will-change-the-web/ http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/html-5-will-change-the-web/#comments Wed, 02 Dec 2009 09:40:40 +0000 حامد http://www.7sal.com/?p=370 Continue reading →]]> HTML 5خیلی ها از آن سخن میگویند. بسیاری نامش را برده اند و کمتر کسی است که از آن چیزی نشنیده‌است. فایرفاکس و سافاری بخشی از آن را پشتیبانی میکنند. اما هنوز کسی به طور دقیق نمیداند که HTML5 چیست و چه کاری انجام میدهد؟!

اینجا قصد داریم تا به طور مختصر چیزهایی درباره‌ی این معجزه جدید وب یاد بگیریم.

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

چه چیزهایی را میتوان از Html5 انتظار داشت؟

فضای آفلاین: Google Gears را میشناسید؟ HTML5  قرار است چیزی شبیه آن در خود داشته باشد. برای مثال میتوان باHTML5 ایمیلهای خود را به صورت آفلاین خواند. مثال دیگر این است که سایتها میتوانند برخی از اطلاعات خود را بر روی سیستم شما ذخیره کنند و این یعنی چند برابر سرعتی که الان داریم درست مثل یک “ابًر کوکی”.

اشکال غیر منظم: با امکانات کنونی تنها شکلی که میتوان برای قسمتهای صفحه داشت مستطیل است در حالیکه در HTML5 دیگر از این محدودیت ها خبری نیست. میتوانید از هر گوشه صفحه بهترین استفاده را ببرید. حتی میتوانید تنها با کد نویسی تصاویر, نمودارها و هرچیزی را که فکر کنید در صفحه خود داشته باشید. دیگر مجبور به استفاده از فلش یا افزونه های دیگر نیستید.

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

مکان یابی: HTML5 میتواند مکان شما را تشخیص دهد و نتایج جستجو را بر حسب مکان شما سفارشی کند و یا اینکه ورودی های توییتر شما را برچسب گذاری کند.

فرم‌های هوشمندتر: جعبه های متن, checkbox ها, منوهای کشویی و تمام عناصر یک فرم هوشمندانه تر عمل خواهند کرد و به شما امکانات بیشتری برای کنترل اطلاعات خواهند داد. برای مثال شما میتوانید هنگام ورود اطلاعات صحت و اعتبار آنها را کنترل کنید. همچنین عناصر فرم تعامل بیشتری با هم خواهند داشت.

تمرکز بر برنامه های تحت وب: آینده ازآن برنامه های آنلاین خواهد بود. HTML5 این امکان را میدهد که یک برنامه تحت وب بدون درد و خون ریزی با هر نوع سیستمی سازگار باشد و به کاربران این فرصت را میدهد تا بدون استفاده از ابزاری خاص از یک برنامه لذت ببرند. با HTML5 میتوان ابزارهای چت, انجمن, سایتهای drag-and-drop نوشت.

آیا با وجود JavaScript  و Flash  نیازی به استفاده از HTML5 هست؟

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

Flash همیشه انتخاب خوبی نیست. مشکلات زیادی دارد. برای مثال استفاده زیاد از منابع سیستم مانند CPU و اینکه همیشه باید برای استفاده از آن نرم افزارش را نصب کرد.

و در آخر اینکه HTML5 آمده تا وب را تکان دهد. منتظر یک زلزله ۱۰ ریشتری باشید.

منبع LifeHacker

اگر مایلید در مورد HTML5 بیشتر بدانید به منابع زیر رجوع کنید.

HTML5 – Wikipedia

HTML5

Dive Into HTML5

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

  1. امير:
    2009-Dec-02 سلام با اينكه فلش مشكلات زيادي دارد به اين زودي جايگزين نميشه از مطلبتون واقعا ممنونم
  2. علیرضا:
    2010-Jan-22 از مطلب خوبت استفاده کردم. ممنون
  3. سعید:
    2010-Jun-08 آقا واقعا متشکر از اینکه اطلاعاتتون رو به اشتراک میگذارین . واقعا تحسین داره . راستش خیلی ذوق زده شدم که به عنوان یه طراح سایت با این HTML5 کشتی بگیرم ! به نظرم واسه ما دنیای خیلی متفاوتی بسازه ! پاینده باشی

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

]]> http://www.7sal.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8/html-5-will-change-the-web/feed/ 3 بهینه سازی کدهای HTML http://www.7sal.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af/html-optimization/ http://www.7sal.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af/html-optimization/#comments Wed, 22 Jul 2009 08:32:33 +0000 حامد http://www.7sal.com/?p=95 Continue reading →]]> همه ما معتقدیم که دنیای مجازی و محتوای اون برای سرعت بخشیدن به ارتباطات و تبادل اطلاعات به وجود اومد. هزاران سایت و میلیون ها صفحه در اینترنت وجود دارن که هرکدوم با هدفی خاص بوجود اومدن. یکی از اهداف مشترکی که همه صفحات وب دنبال میکنن افزایش سرعت ارتباط هست.

حالا تصور کنید که همین صفحات وب عامل کندی و هدر رفتن وقت بشن. در این مطلب و مطالب مرتبط قصد داریم تا راهکارهای مٶ ثری رو برای افزایش سرعت بارگذاری صفحات وب بررسی کنیم.

در اولین قدم به بهینه سازی کدهای html میپردازیم.

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

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

در HTML و یا حتی نسخه جدید و سخت گیر تر اون XHTML گاهی اوقات شما اجازه حذف برخی تگ ها رو دارید که بودن یا نبودنشون هیچ تفاوتی ایجاد نمیکنه. در زیر لیستی از این تگها ارایه شده که شما میتونید اونها رو به دلخواه خودتون حذف کنید.(تگهایی که روی آونا خط کشیده شده تگهای خالی هستن. یعنی عملا هیچ محتوایی ندارن.)

  • </area>
  • </base>
  • <body>
  • </body>
  • </br>
  • </col>
  • </colgroup>
  • </dd>
  • </dt>
  • <head>
  • </head>
  • </hr>
  • <html>
  • </html>
  • </img>
  • </input>
  • </li>
  • </link>
  • </meta>
  • </option>
  • </p>
  • </param>
  • <tbody>
  • </tbody>
  • </td>
  • </tfoot>
  • </th>
  • </thead>
  • </tr>

برای مثال شما میتونید به جای استفاده از فرمت <li> List Item</li> از شکل کوتاه تر <li> List Item استفاده کنید. شما حتی میتونید تگهایی مثل <body> , <head> , <html> رو هم که وجودشون در HTML لازم نیست حذف کنید.

HTML 5

نسخه 5 html که هنوز در دست توسعه امکانات بیشتری رو برای کاهش حجم به شما ارایه میده.

برای مثال شما میتونید از حالت کوتاه شده اعلان DOCTYPE استفاده کنید:

1
&lt;!DOCTYPE html&gt;

به جای دستور طولانی و معمول اون در نسخه های پایین تر html:

1
<span>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"&gt;</span>

یا مثلا زمانی که قصد دارد encoding مربوط به صفحه تون رو مشخص کنید به جای استفاده از دستور طولانی <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

از شکل کوتاه شده‌ی اون استفاده کنید.

1
&lt;meta charset="utf-8"&gt;

مورد دیگه اینه که هنگام استفاده از تگهای script و یا style حتما لازم نیست که خاصیت type اون رو مشخص کنید.

1
2
3
&lt;script&gt;
به جای
&lt;script type="text/javascript"&gt;

به طور کل اگر شما بتونید از نکات بالا به موقع و به صورت ترکیبی استفاده کنید قادر خواهید بود که بین 5 تا 20٪ از حجم فایلتون کم کنید و این خودش تأثیر به سزایی در سرعت لود صفحات شما در اینترنت داره.

برگرفته از مقالات آموزشی گوگل کد

q2njz6rwia

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

]]> http://www.7sal.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af/html-optimization/feed/ 0