<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>گزیر &#187; طراحی وب</title>
	<atom:link href="http://www.gozir.com/category/webdesign/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gozir.com</link>
	<description>گاهنوشتهای حمیدرضا محمدی</description>
	<lastBuildDate>Sat, 10 Dec 2011 06:31:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=3.1.3</generator>
	<language>fa</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>بازی خطوط و یک مجموعهٔ دیدنی</title>
		<link>http://www.gozir.com/1390/03/14/lines-game-raphael-library/</link>
		<comments>http://www.gozir.com/1390/03/14/lines-game-raphael-library/#comments</comments>
		<pubDate>Sat, 04 Jun 2011 04:43:00 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[ابزارهای آنلاین و وب ۲]]></category>
		<category><![CDATA[بازی]]></category>
		<category><![CDATA[سرگرمی]]></category>
		<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/?p=2113</guid>
		<description><![CDATA[
از بازیهای ساده و وقت‌پرکن خوشتان می‌آید؟ روی تصویر زیر کلیک کنید. باید در هر ردیف یا ستون حداقل ۵ توپ همرنگ را کنار هم بنشانید تا آنها را با هم ببرید و این کار را تا وقتی جا دارید تکرار کنید.



خالق این بازی چیز مهمتری هم درست کرده: او یک کتابخانهٔ جاوا اسکریپت برای [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
از بازیهای ساده و وقت‌پرکن خوشتان می‌آید؟ روی تصویر زیر کلیک کنید. باید در هر ردیف یا ستون حداقل ۵ توپ همرنگ را کنار هم بنشانید تا آنها را با هم ببرید و این کار را تا وقتی جا دارید تکرار کنید.
</p>
<a href="http://dmitry.baranovskiy.com/work/lines/"><img src="http://www.gozir.com/logman/wp-content/uploads/2011/06/lines-game.gif" alt="Lines Game" width="500" height="509" class="centered" /></a>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
<a href="http://dmitry.baranovskiy.com">خالق این بازی</a> چیز مهمتری هم درست کرده: او یک کتابخانهٔ جاوا اسکریپت برای آسان کردن کار با عناصر گرافیکی برداری ساخته که از فناوریهایی همچون SVG و VML استفاده می‌کند. مهم نیست که برنامه‌نویس وب باشید یا نه، به نظرم اگر سری به سایت این کتابخانه بزنید گالری نمونه‌کارهای قابل انجام با این کتابخانه جذبتان خواهد کرد. به <a href="http://raphaeljs.com">اینجا</a> بروید و روی نمونه‌ها یکی یکی کلیک کنید.
</p>
<a href="http://raphaeljs.com"><img src="http://www.gozir.com/logman/wp-content/uploads/2011/06/raphael-demos.jpg" alt="نمونه کارهای قابل انجام با کتابخانهٔ رافائل" width="500" height="621" class="centered" /></a>
]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1390/03/14/lines-game-raphael-library/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>کمیک بلاگ</title>
		<link>http://www.gozir.com/1388/10/23/theoatmeal/</link>
		<comments>http://www.gozir.com/1388/10/23/theoatmeal/#comments</comments>
		<pubDate>Wed, 13 Jan 2010 17:37:11 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[سایت]]></category>
		<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/?p=1660</guid>
		<description><![CDATA[
وبلاگهایی که به جای نوشته در آنها کاریکاتور یا کمیک می‌گذارند این روزها کم نیستند. نمونه‌های فارسیش را هم احتمالاً دیده‌اید مثل هفت یا آقای اوف.


یک نمونهٔ جالب (انگلیسی) از این نوع را چند روز پیش پیدا کردم که به نظرم اگر به اینجور وبلاگها علاقه دارید بد نیست سری به آن بزنید: The Oatmeal. [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
وبلاگهایی که به جای نوشته در آنها کاریکاتور یا کمیک می‌گذارند این روزها کم نیستند. نمونه‌های فارسیش را هم احتمالاً دیده‌اید مثل <a href="http://7.persianblog.ir/">هفت</a> یا <a href="http://misteroof.blogspot.com/">آقای اوف</a>.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
<a href="http://theoatmeal.com/comics"><img src="http://www.gozir.com/logman/wp-content/uploads/2010/01/theoatmeal.jpg" alt="theoatmeal" width="200" height="149" class="alignleft" /></a>یک نمونهٔ جالب (انگلیسی) از این نوع را چند روز پیش پیدا کردم که به نظرم اگر به اینجور وبلاگها علاقه دارید بد نیست سری به آن بزنید: <a href="http://theoatmeal.com/comics">The Oatmeal</a>. از آنجا که صاحبش -گویا- طراح وب است، مطالبش کم و بیش مزهٔ کامپیوتر و وب می‌دهد. مثلاً <a href="http://theoatmeal.com/comics/design_hell">این کمیک</a> را با عنوان «چطور می‌شود که یک پروژهٔ طراحی وب، مستقیماً به ته چاه ویل سقوط می‌کند؟» ببینید. کمیکهایی با موضوعات دیگر هم دارد مثل <a href="http://theoatmeal.com/comics/coffee">این</a> با عنوان «پانزده نکته دربارهٔ قهوه». اگر فرصت سر زدن به این کمیک‌بلاگ را پیدا کردید به نظرم <a href="http://theoatmeal.com/comics/customer_service">این کمیک را در مورد خدمات پس از فروش شرکتها</a> حتماً ببینید.
</p>]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1388/10/23/theoatmeal/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>لیستهای مرتب با اعداد فارسی</title>
		<link>http://www.gozir.com/1388/10/15/persian-ol-tags/</link>
		<comments>http://www.gozir.com/1388/10/15/persian-ol-tags/#comments</comments>
		<pubDate>Tue, 05 Jan 2010 18:40:32 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[برنامه‌نویسی]]></category>
		<category><![CDATA[زبان فارسی]]></category>
		<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/?p=1638</guid>
		<description><![CDATA[
تگ ol (لیست مرتب) در html در CSS ویرایش ۲ توانایی نمایش اعداد به صورت فارسی را ندارد (از اعداد لاتین، رومی و ارمنی(!) پشتیبانی می‌کند اما اعداد را به صورت عربی یا فارسی نمی‌تواند نشان دهد). استایلهای انواع لیستها را در این استاندارد اینجا می‌توانید ببینید. در استاندارد جدیدتر گویا قرار است پشتیبانی از [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
تگ ol (لیست مرتب) در html در CSS ویرایش ۲ توانایی نمایش اعداد به صورت فارسی را ندارد (از اعداد لاتین، رومی و ارمنی(!) پشتیبانی می‌کند اما اعداد را به صورت عربی یا فارسی نمی‌تواند نشان دهد). استایلهای انواع لیستها را در این استاندارد <a href="http://www.w3schools.com/Css/css_list.asp">اینجا</a> می‌توانید ببینید. در <a href="http://www.w3.org/TR/css3-lists/">استاندارد جدیدتر</a> گویا قرار است پشتیبانی از شکل اعداد فارسی  هم اضافه شود.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
چند وقتی است استقبالهای شاعران را از هم (<a href="http://ganjoor.net/hafez/saadi/">حافظ از سعدی</a>، <a href="http://ganjoor.net/hafez/salman/">حافظ از سلمان</a>، <a href="http://ganjoor.net/salman/saadi/">سلمان ساوجی از سعدی</a> و ...) را با توجه به میزان مشابهت کلمات ابیات و همینطور با توجه به وزن و قافیهٔ اشعار استخراج کرده‌ام و در گنجور در دسترس قرار داده‌ام. دیروز به نظرم رسید بد نیست این فهرستها را با کمک تگ ol شماره‌گذاری کنم. اما با توجه به نکته‌ای که در پاراگراف قبل گفتم امکان نمایش درست اعداد در متن فارسی وجود نداشت. جستجویی کردم و به <a href="http://www.dot1ne.com/web-design/farsi-arabic-ol-tag/">این صفحه</a> رسیدم. نویسندهٔ مطلب به کمک جاوا اسکریپت مشکل را حل کرده. با کمک اسکریپت او، اسکریپت ساده‌ای نوشتم که امکان نمایش اعداد لیستهای مرتب را به صورت فارسی در اختیار می‌گذارد:
</p>
<span id="more-1638"></span>
[code lang="javascript"]
//Original Code & Author: M Saleh EG[dot1ne] www.dot1ne.com
function faol(){
	ols = document.getElementsByTagName("ol");
  for(i=0; i<ols.length; i++){
		 list=faolgetListItems(ols[i]);		 
		 lis=faformatListItems(list);
 		 newOL=document.createElement("ol");
         newOL.style.listStyleType = "none";
		 newOL.style.paddingRight = "0px";
		 newOL.style.marginRight = "10px";		 
         for(var k=0; k<lis.length; k++)
			newOL.appendChild(lis[k]);
	     newOL.id=ols[i].id;
		 newOL.className=ols[i].className;
		 ols[i].parentNode.replaceChild(newOL, ols[i]);
			
	}  
}
function  faolgetListItems(ol){
	     lis = new Array();
         for(var i=0; i < ol.childNodes.length; i++){
          if(ol.childNodes[i].nodeName == "LI" || ol.childNodes[i].nodeName == "li"){
	      ol.childNodes[i].style.direction="rtl";
	      ol.childNodes[i].style.textAlign="right";
		  if(ol.childNodes[i].childNodes[0].className=="dot1_ol")
		  ol.childNodes[i].removeChild(ol.childNodes[i].childNodes[0]);		  
	      lis.push(ol.childNodes[i]);
	      }
         }
		 return lis;
};	  
function faformatListItems(list_items) {
	     for(var i=0; i < list_items.length; i++){
         index=i+1;
		 list_items[i].innerHTML = "<span class=\"dot1_ol\" style=\"display:block;float:right;width:20px;\" >" + bshfarsinum(String(index)) + ".  &nbsp;</span>" + list_items[i].innerHTML;
		 }	 
		 return list_items;
	  };
function bshfarsinum(englishnum)
{
  var result = "";
  for(var i=0; i<englishnum.length;i++)
 {
   result = result +String.fromCharCode(englishnum.charCodeAt(i)+0x6C0);
 }
 return result;
}[/code]
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
که در نهایت با فراخوانی آن در رویداد onload می‌توان به مقصود رسید:
</p>
[code lang="html"]
<script type="text/javascript" language="JavaScript" src="faol.js"></script>
<script type="text/javascript"> 
  window.onload = function() {faol();}
</script>
[/code]
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
عملکرد کد را در فایرفاکس ۳.۵ و اینترنت اکسپلورر ۸ آزمایش کردم و مشکلی ندیدم.
</p>
<a href="http://ganjoor.net/hafez/saadi/"><img src="http://www.gozir.com/logman/wp-content/uploads/2010/01/hafez-saadi.jpg" alt="استقبالهای حافظ از سعدی" width="497" height="388" class="centered" /></a>]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1388/10/15/persian-ol-tags/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>بسم الله الرحمن الرحیم &#8230;</title>
		<link>http://www.gozir.com/1386/06/09/ga-changlelog/</link>
		<comments>http://www.gozir.com/1386/06/09/ga-changlelog/#comments</comments>
		<pubDate>Fri, 31 Aug 2007 17:17:04 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[ادبیات]]></category>
		<category><![CDATA[خودم]]></category>
		<category><![CDATA[طراحی وب]]></category>
		<category><![CDATA[گزیر]]></category>

		<guid isPermaLink="false">http://www.gozir.com/1386/06/09/ga-changlelog/</guid>
		<description><![CDATA[
می‌گوید:



«بسم الله الرحمن الرحیم»


هست کلید ِ در ِ گنج ِ حکیم!



این بیت اول مخزن الاسرار نظامی است.


جالب است بدانیم که عبارت «بسم الله الرحمن الرحیم» طبق قواعد عروض (=وزن شعر) فارسی یک جمله‌ی کاملاً موزون است! بر اساس قواعد وزن شعر فارسی (که با طبیعت بیان فارسی سازگاری کامل دارد) یک شاعر می‌تواند در جایی [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
می‌گوید:
</p>
<div class="beit">
<div class="msr1">
<p style="color:#040">«بسم الله الرحمن الرحیم»</p>
</div>
<div class="msr2">
<p style="color:#040">هست کلید ِ در ِ گنج ِ حکیم!</p>
</div>
</div>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
این <a href="http://www.gozir.com/adab/nezami/makhzanolasrar/sh1">بیت اول مخزن الاسرار</a> نظامی است.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
جالب است بدانیم که عبارت «بسم الله الرحمن الرحیم» طبق قواعد عروض (=وزن شعر) فارسی یک جمله‌ی کاملاً موزون است! بر اساس قواعد وزن شعر فارسی (که با طبیعت بیان فارسی سازگاری کامل دارد) یک شاعر می‌تواند در جایی که باید دو حرکت کوتاهِ منتهی به یک هجای بلند به کار ببرد، دو هجای بلند متولی را جایگزین کند. مثلاً می‌تواند به جای «بــِــخـــَـــر َد» کلمه‌ی «بـــِــــخــْـــرَد» را به کار ببرد (در این مورد قبلاً <a href="http://www.gozir.com/1385/02/04/skt-aruzi/" title="سکته‌ی عروضی">نوشته‌ام</a>). حالا در این جا نظامی از این قاعده بهره گرفته و این آیه‌ی قرآن را بدون نیاز به تغییر و جایگزینی کلمات، در داخل شعر خودش جا داده (وزن این شعر هست : «مفتعلن مفتعلن فاعلن» که طبق این قاعده به جای هر کدام از «مفتَعِلُن ها» می‌شود گذاشت «مفعولن» و وزن «بسم الله الرحمن الرحیم» را به دست آورد یعنی «مفعولن مفعلون فاعلن»).
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
البته احتمالاً موزون بودن عبارت «بسم الله الرحمن الرحیم» در بیت فوق، خیلی به نظر طبیعی جلوه نمی‌کند و دلیل آن هم این است که فرمولی که در بالا به آن اشاره کردم، برای موزون به نظر رسیدن این عبارت، باید دو بار به آن اعمال می‌شود و خوب جای آن هم در ابتدای عبارت است که خوب «سکته» را ملموس می‌کند. اما در خیلی از شعرها می‌بینیم که این فرمول بدون این که خواننده متوجه بشود بر روی وزن عبارات اعمال می‌شود. اصلاً بر همین اساس است که «رباعی» دارای «دوازده» وزن کاملاً همتراز است و در خیلی از رباعیها این تبدیلها چندین بار روی وزن رباعی اعمال می‌شود.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
بگذریم! هدف این بود که یک اشاره‌ای کرده باشم به این که یک سری تغییرات در «<a href="http://www.gozir.com/adab/">گنج ادب</a>» داده‌ام! ما که تصمیم داشتیم این چند روز تعطیلی را یک سری به <a href="http://www.gozir.com/category/senejan/" title="سنجان">دهاتمان</a> بزنیم، در شلوغی روز پیش از نیمه‌ی شعبان و احتمالاً به دلیل تعداد زیاد مشتاقان زیارت قم، موفق به دستیابی به هیچ گونه وسیله‌ی نقلیه‌ای -اعم از قطار، اتوبوس یا سواری بین شهری- در زمان معقول نشدیم. حال و حوصله‌ی انتظار کشیدن در ترمینال جنوب تا هشت و نه شب را هم نداشتیم و از معدود دفعاتی بود که زورمان آمد هجده یا بیست هزار تومان (!) در دهان لاشخورهای به کمین نشسته در آنجا برای گز کردن یک راه دو ساعت و نیمه بپردازیم. لذا سر از پا درازتر به خانه برگشتیم و مثل بچه‌ی آدم این چند روزه را همه‌اش <acronym title="SQL">اس.کیو.ال</acronym> بازی می‌کردیم تا کمی اوضاع این مجموعه را بهتر کنیم (مجموعه‌ای که چند بار تصمیم گرفته‌ام که کلاً حذفش کنم ولی خوب! به دلیل این که آمارها از وجود چند تا مشتری دائمی خبر می‌داد که با وجود بسته بودن این مجموعه به روی موتورهای جستجو هر روز به آن سر می‌زنند، از این کار منصرف شدم).
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
در هر صورت غیر از جنگولک بازیهای مربوط به شکل و قیافه‌ها، دیوان غزلیات شمس، دیوان غزلیات سعدی و پنج گنج نظامی را به آن اضافه کرده‌ام. امکانات جستجوی آن را هم افزایش داده‌ام و امکاناتی برای دستیابی به شعر بعدی و قبلی هر شعر هم فراهم کرده‌ام (که البته کمی مشکل دارد).
</p>
<a href="http://www.gozir.com/adab/"><img src="http://www.gozir.com/logman/wp-content/uploads/2007/08/ga-screenshot.jpg" alt="گنج ادب" class="centered" /></a>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
جالب اینجاست که خیلی از کارهایی را که پارسال کرده بودم -تا این مجموعه را راه بیندازم- از خاطر برده بودم. به همین دلیل و با یک اشتباه <acronym title="SQL">اس.کیو.ال</acronym>ی، خرابکاریی کردم که در ابتدا فکر می‌کردم فاتحه‌ی همه چیز خوانده است! ولی خوب! بعد از کمی <a href="http://www.google.com">گوگلیدن</a> و مرور گذشته‌ها فهمیدم می‌شود درستش کرد.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
خلاصه به جهت استفاده‌ی برادران و خواهران اهل <acronym title="SQL">اس.کیو.ال</acronym>، نمونه‌ای از دستوراتی را که مرا در این راه یاری کردند، -بدون توضیح اضافی- در اینجا یادآور می‌شوم به شرط آن که سرورش <acronym title="MySQL">مای اس.کیو.ال</acronym> باشد و جدولهایش هم جدولهای <acronym title="WordPress">وردپرس</acronym> ;) (منتش را سر شما گذاشتم ولی واقعیتش برای استفاده‌ی بعدی خودم اینجا می‌آورمشان، آخر من هر چیزی را که اینجا می‌نویسم، بعداً خیلی راحت به یادش می‌آورم و دوباره پیدایش می‌کنم!):
[code lang="sql"]
UPDATE wp_posts SET post_name=CONCAT('sh',SUBSTRING( post_title, 8, 10 ))
WHERE (post_type = "post")
AND
(ID IN (
SELECT post_id
FROM wp_post2cat
WHERE category_id =23
)
);
UPDATE wp_posts SET post_title=REPLACE(post_title, "dlths", "")
WHERE (post_type = "post")
AND
(ID IN (
SELECT post_id
FROM wp_post2cat
WHERE category_id =23
)
);
UPDATE wp_posts SET post_author =7 WHERE (
post_type = "post"
) AND (
ID IN (
SELECT post_id
FROM wp_post2cat
WHERE category_id =23
)
);
[/code]
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
البته در جنگولک بازیهای مربوط به قیافه به یک مشکل عجیب برخوردم و آن این که فهمیدم <acronym title="Microsoft Internet Explorer">اینترنت اکسپلورر</acronym> برای عنصر select (همان <acronym title="combobox">کمبوباکس</acronym> یا لیست بازشوی خودمان) از خاصیت border پشتیبانی نمی‌کند و راه حل سرراست هم ندارد (<a href="http://www.456bereastreet.com/archive/200409/styling_form_controls/">این هم سندش</a>)! به نظرم رسید بروم و به جای کمبوباکس (برای محدود کردن نتایج جستجو روی شاعر خاص) از یک لیست نامرتب (ul) استفاده کنم [مثل <a href="http://www.csszengarden.com/?cssfile=/057/057.css&page=0">این</a>] و بعد نتایج انتخاب کاربران را با <acronym title="javascript">جاوااسکریپت</acronym> به یک عنصر مخفی select انتقال بدهم. اما خوب! حوصله‌اش را نداشتم ;) . خلاصه اگر «کاربران محترم اینترنت اکسپلورر» جعبه‌ی بازشوی انتخاب شاعر برای جستجو در اشعار را در <a href="http://www.gozir.com/adab/">این صفحه</a> به شکل فجیعی زشت و نامتناسب مشاهده می‌فرمایند، فرستنده را ملامت نکنند که ایراد از گیرنده است! اگر برایشان مقدور است <a href="http://www.gozir.com/1385/05/08/why-firefox/" title="فایرفاکس">گیرنده‌ی معقول‌تری</a> ابتیاع فرمایند!
</p>]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1386/06/09/ga-changlelog/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>جفری زلدمن</title>
		<link>http://www.gozir.com/1386/05/18/zeldman/</link>
		<comments>http://www.gozir.com/1386/05/18/zeldman/#comments</comments>
		<pubDate>Thu, 09 Aug 2007 16:35:21 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/1386/05/18/zeldman/</guid>
		<description><![CDATA[
نام جفری زلدمن از آن نامهایی است که در مبحث استانداردهای طراحی وب زیاد به گوش آدم می‌خورد. واقعیتش من تا همین دیروز نمی‌دانستم این آقا دقیقاً در این مورد چه کاری انجام داده. تا این که دیروز در جایی و از طریق لینکی به این مقاله در مجله‌ی بیزنس ویک رسیدم و آن را [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
نام <a href="http://www.zeldman.com" title="Jeffrey Zeldman">جفری زلدمن</a> از آن نامهایی است که در مبحث <a href="http://www.gozir.com/1386/03/11/web-standards-part1/">استانداردهای طراحی وب</a> زیاد به گوش آدم می‌خورد. واقعیتش من تا همین دیروز نمی‌دانستم این آقا دقیقاً در این مورد چه کاری انجام داده. تا این که دیروز در <a href="http://photomatt.net/2007/08/07/king-of-web-standards/">جایی</a> و از طریق لینکی به <a href="http://www.businessweek.com/innovate/content/aug2007/id2007086_670396.htm" title="Jeffrey Zeldman: King of Web Standards">این مقاله در مجله‌ی بیزنس ویک</a> رسیدم و آن را خواندم. بد ندیدم خلاصه‌ای از آن را اینجا بازگو کنم.
</p>
<img src="http://www.gozir.com/logman/wp-content/uploads/2007/08/zeldman.jpg" alt="جفری زلدمن" class="centered" />
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
بر خلاف آنچه ممکن است تصور کنیم <a href="http://www.happycog.com/about/zeldman/">جفری زلدمن</a> واضع و مبدع استانداردهای وب نیست، بلکه او مروج و مبلغ استفاده از این استانداردها بوده. قبل از این که او تلاش برای جا انداختن این استانداردها را شروع کند استانداردهای طراحی وب وجود داشتند. در واقع مخترع وب (<a href="http://www.w3.org/People/Berners-Lee/" title="Tim Berners-Lee">تیم برنرزلی</a>) مدتها قبل، استانداردهای طراحی وب را در قالب <a href="http://www.w3.org">کنسرسیوم وب</a> تدوین کرده بود. اما مشکل اینجا بود که در جنگ مرورگرها -بین مرورگر اینترنت اکسپلورر از شرکت مایکروسافت و مرورگر نت‌اسکیپ- تلاش برای پیروزی، هر کدام از تولیدکنندگان مرورگرها را واداشته بود تا با عرضه‌ی فناوریهای انحصاری، بسته و غیرقابل کپی‌سازی به همراه مرورگرهایشان امکانات بیشتری را به کاربران عرضه کنند و سهم بیشتری از بازار را از آن خود کنند. مشکل اینجا بود که این فناوریهای انحصاری اغلب با استانداردهای طراحی وب تعارض داشتند و وضعیتی را به وجود آورده بودند که بسیاری از سایتها فقط با یکی از دو مرورگر اصلی آن روزها سازگاری داشتند.
</p>
<img src="http://www.gozir.com/logman/wp-content/uploads/2007/08/connected-earth.gif" alt="نمونه ای از ناسازگاری با مرورگرها" class="centered" />
<div style="margin:auto;text-align:center;">
<p style="text-align:center;margin-top:0px"><small>در جریان جنگ مرورگرها مشاهده‌ی سایتهای کاملاً ناسازگار با یک مرورگر معمول بود.</small></p>
</div>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
داستان زلدمن از جایی شروع شد که او - پس از پشت سر گذاشتن سوابق کاریی همچون گزارشگری برای روزنامه‌ها از جمله روزنامه‌ی معروف <a href="http://www.washingtonpost.com" title="The Washington Post">واشنگتن پست</a> - در یک شرکت تبلیغاتی به عنوان <acronym title="art director">کارگردان هنری</acronym> مشغول به کار شد. در سال ۱۹۹۵ و همزمان با جریان جنگ مرورگرها یک مشتری به او مراجعه کرد و از او خواست تا برایش یک سایت اینترنتی طراحی کند. این پروژه به تأسیس شرکت جدیدی از سوی زلدمن انجامید که <a href="http://www.happycog.com" title="Happy Cog">هپی کاگ</a> نام گرفت. زلدمن در جریان فعالیت شغلی جدیدش متوجه بحران ناسازگاری سایتها با مرورگرهای مختلف شد.
</p>
<blockquote>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اگر توافقی روی <acronym title="frame rate">تعداد فریمها در ثانیه</acronym>، خصوصیات لنزها و تجهیزات ضبط صدا صورت نمی‌گرفت صنعت فیلمسازی شکل نمی‌گرفت.
</p>
</blockquote>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
این سخن از آن ِ زلدمن است و او اعتقاد داشت به این که اینترنت و وب نیز از این قاعده مستثنی نیست.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
در سال ۱۹۹۸ زلدمن و همفکرانش <a href="http://www.webstandards.org" title="Web Standards Project">پروژه‌ی استانداردهای وب</a> (WaSP) را راه‌اندازی کردند: ائتلافی از طراحان و برنامه‌نویسان وب که تلاش می‌کردند عرضه‌کنندگان مرورگرهای وب (به طور عمده مایکروسافت و نت‌اسکیپ) را وادار کنند تا برای جلوگیری از افزایش هزینه‌های طراحی وب، مرورگرهایشان را با استانداردهای طراحی وب سازگار کنند. پروژه‌ای که سرانجام در اوایل سال ۲۰۰۰ به ثمر نشست و عرضه‌کنندگان عمده‌ی مرورگرها را با خود همراه کرد. در این هنگام زلدمن آماده بود تا به فعالیتهای سابقش برگردد و انرژیش را روی کارهای طراحیش بگذارد. اما در همین هنگام متوجه شد که گروه دیگری وجود دارند که باید مزایای استانداردهای طراحی وب برای آنها جا بیفتند. این گروه خود طراحان وب بودند! مثلاً بعضی از طراحان وب تصور می‌کردند که استانداردهای طراحی وب با حذف هزینه‌هایی که آنها بابت سازگار کردن سایتها با مرورگرهای متفاوت از مشتریان خود می‌گرفتند در واقع باعث ضرر مالی آنها می‌شود! از این رو این دسته از طراحان وب به رعایت این استانداردها چندان راغب نبودند.  او از این پس تلاش کرد تا طراحان را راجع به مزایای رعایت این استانداردها برای آنها مطلع سازد و آنها را نیز به تولید سایتهای سازگار با استانداردهای طراحی وب وادارد.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
زلدمن نویسنده‌ی توانمندی است. او توانایی خاصی در توضیح مسائل فنی برای افراد غیرفنی دارد. به عنوان نمونه ببینید او چگونه و با چه زبان همه‌کس فهمی ضرورت حذف ناسازگاری بین مرورگرها را روشن می‌کند:
</p>
<blockquote>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
صفحه اول سایت یاهو در طول یک روز میلیونها بار برای هر بازدیدکننده ایجاد و ارائه می‌شود. هر یک بایتی که در این صفحه [بابت تلاش برای سازگار کردن آن با مرورگرهای قدیمی] در قالب هکهای <acronym title="HTML hacks">اچ.تی.ام.ال</acronym> به هدر می‌رود در عدد نجومی تعداد بازدیدها از این سایت ضرب می‌شود و ترافیک سایت یاهو را چندین گیگابایت افزایش می‌دهد. همین افزایش، هزینه‌های میزبانهای وب یاهو را هر چه بیشتر افزایش می‌دهد و سرباره‌های مالیی مشابه بودجه‌های وزارت جنگ آمریکا را به یاهو تحمیل می‌کند!
</p>
</blockquote>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
امروزه تعداد زیادی از سایتها با استانداردهای طراحی وب سازگار شده‌اند (<a href="http://www.gozir.com/1386/04/17/web-standards-and-large-companies/">اینجا</a> را ببینید) و تشکلهای استانداردهای وب به کار خودشان ادامه می‌دهند. اما زلدمن فعالیت چندانی در این زمینه ندارد. او این روزها بیشتر وقت خود را برای مشتریان سرشناس شرکتش -شرکتهای همچون <a href="http://www.warnerbros.com" title="Warner Bros. Entertainment">برادران وارنر</a>، <acronym title="Advertising Age magazine">مجله‌ی عصر تبلیغات</acronym> و ...- صرف می‌کند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
به عنوان نکات پایانی درباره‌ی زلدمن بد نیست بدانید که او از اولین کسانی بوده که <a href="http://www.zeldman.com">یک سایت شخصی برای خودش</a> راه‌اندازی کرده‌اند (سال ۱۹۹۵، <a href="http://www.happycog.com/about/zeldman/">منبع</a>). ضمناً او در یک دوره از زندگیش یک معتاد الکلی بوده تا این که در سال ۱۹۹۳ توانسته این اعتیاد را به طور کامل کنار بگذارد (<a href="http://en.wikipedia.org/wiki/Jeffrey_Zeldman">منبع</a>).
</p>]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1386/05/18/zeldman/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>غولهای نرم‌افزاری و استانداردهای طراحی وب</title>
		<link>http://www.gozir.com/1386/04/17/web-standards-and-large-companies/</link>
		<comments>http://www.gozir.com/1386/04/17/web-standards-and-large-companies/#comments</comments>
		<pubDate>Sun, 08 Jul 2007 19:25:54 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[سایت]]></category>
		<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/1386/04/17/web-standards-and-large-companies/</guid>
		<description><![CDATA[
امروز اتفاقی و به خاطر یک اشاره فیلم یاد هندوستان کرد و سری به سایت وین‌امپ زدم.


چیزی که در طراحی جدید سایت وین‌امپ توجهم را جلب کرد علاوه بر سبکی صفحات به نسبت نگارشهای قبلی آن و استفاده‌ی مناسب از جاواسکریپت و آژاکس در آنها، طراحی ساده، زیبا و در عین حال کاملاً مطابق با [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
امروز اتفاقی و به خاطر <a href="http://lifehacker.com/software/ipod/manage-your-music-with-winamp-276000.php">یک اشاره</a> فیلم یاد <a href="http://www.gozir.com/index.php?s=winamp">هندوستان</a> کرد و سری به سایت <a href="http://www.winamp.com">وین‌امپ</a> زدم.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
چیزی که در طراحی جدید سایت وین‌امپ توجهم را جلب کرد علاوه بر سبکی صفحات به نسبت نگارشهای قبلی آن و استفاده‌ی مناسب از جاواسکریپت و آژاکس <acronym title="ببینید چقدر نرم بین تکه‌های موزیک، پوسته‌ها و افزونه‌های وین‌امپ می‌توان حرکت کرد">در آنها</acronym>، طراحی ساده، <acronym title="منوهای شیشه ای آن را ببینید">زیبا</acronym> و در عین حال کاملاً مطابق با <a href="http://www.gozir.com/1386/03/11/web-standards-part1/">استانداردهای طراحی وب</a> آن بود (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.winamp.com">چک کنید</a>):
</p>
<a href="http://www.winamp.com"><img src="http://www.gozir.com/logman/wp-content/uploads/2007/07/winamp-site.gif" alt="سایت وین امپ" class="centered" /></a>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.winamp.com"><img src="http://www.gozir.com/logman/wp-content/uploads/2007/07/winamp-validates.gif" alt="سایت وین امپ با استانداردهای طراحی وب سازگار است" class="centered" /></a>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
وین‌امپ هم‌اکنون تحت مالکیت شرکت AOL است و متعلقات آن (نرم‌افزار، سایت، جامعه‌ی کاربران و ...) تحت نظارت این شرکت اداره می‌شود. چیزی که به نظرم جالب آمد رویکرد شرکتهای بزرگ درگیر فناوری اطلاعات به پیروی از استانداردهای وب است. این که غولهای نرم‌افزاری دنیا به استانداردهای وب اهمیت چندانی نمی‌دهند همواره یکی از دغدغه‌های مدافعان این استانداردها بوده است (برای نمونه <a href="http://www.alistapart.com/articles/standardsandcompanies/">اینجا</a> را ببینید). اما این سایت و نمونه‌های دیگر نشان دهنده‌ی آن هستند که این روند در حال تغییر است. چند لحظه پیش چک کردم: سایتهای اصلی غولهای نرم‌افزاری <a href="http://www.ibm.com/us/">آی.بی.ام</a>، <a href="http://www.novell.com">ناول</a> کاملاً با استانداردهای W3C همخوان هستند (چک کنید: <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.novell.com&charset=%28detect+automatically%29&doctype=Inline">ناول</a> و <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ibm.com%2Fus%2F&charset=%28detect+automatically%29&doctype=Inline">آی.بی.ام</a>). سایتهای <a href="http://www.microsoft.com">مایکروسافت</a> <a href="http://www.apple.com">و اپل</a> هر چند عاری از خطا نیستند ولی شمای کلی و تعداد کم موارد ناسازگاری نشان دهنده‌ی حرکت به سمت استانداردها از سوی این شرکتهاست و پرتال <a href="http://www.msn.com">ام.اس.ان</a> که یکی از متعلقات مایکروسافت است <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.msn.com">کاملاً با استانداردهای وب تطابق دارد</a>.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
رعایت استانداردهای وب در طراحی سایتهای اینترنتی باعث کاهش زمان و هزینه‌ی نگهداری و خطایابی آنها می‌شود و مطمئناً این بهینه‌سازیها و بهره‌وریهای به وجود آمده از این راه، نظر کارشناسان شاغل در غولهای نرم‌افزاری را نیز به خود جلب می‌کند.
</p>]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1386/04/17/web-standards-and-large-companies/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>استانداردهای طراحی وب (۳)</title>
		<link>http://www.gozir.com/1386/03/21/web-standards-part3/</link>
		<comments>http://www.gozir.com/1386/03/21/web-standards-part3/#comments</comments>
		<pubDate>Mon, 11 Jun 2007 17:49:29 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/1386/03/21/web-standards-part3/</guid>
		<description><![CDATA[
اولین قسمت این سری را اینجا و قسمت دوم آن را اینجا بخوانید.

(۱)

دوست ندارم گمراهتان کنم! باید این واقعیت را بدانید که رعایت استانداردهای وب تضمین کننده‌ی نمایش یکسان صفحات وب در مرورگرهای مختلف نیست. در واقع میزان پشتیبانی مرورگرهای معمول از استانداردهای طراحی وب متفاوت است. به همین دلیل ممکن است صفحات وبی که [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اولین قسمت این سری را <a href="http://www.gozir.com/1386/03/11/web-standards-part1/">اینجا</a> و قسمت دوم آن را <a href="http://www.gozir.com/1386/03/11/web-standards-part2/">اینجا</a> بخوانید.
</p>
<h3>(۱)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
دوست ندارم گمراهتان کنم! باید این واقعیت را بدانید که رعایت استانداردهای وب تضمین کننده‌ی نمایش یکسان صفحات وب در مرورگرهای مختلف نیست. در واقع میزان پشتیبانی مرورگرهای معمول از استانداردهای طراحی وب متفاوت است. به همین دلیل ممکن است صفحات وبی که از نظر ابزارهای تأیید کننده‌ی استاندارد کنسرسیوم وب (<a href="http://validator.w3.org/">این</a> و <a href="http://jigsaw.w3.org/css-validator/">این</a>) بدون ایراد تشخیص داده شده‌اند در مرورگری مثل اینترنت اکسپلورر با اشکال نمایش داده شوند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
<img src="http://www.gozir.com/logman/wp-content/uploads/2007/06/questns.gif" class="alignright" alt="؟" />اولاً چرا اینطور است؟ مگر قرار نبوده تولیدکنندگان مرورگرهای وب استانداردهای طراحی وب را رعایت کنند؟ و ثانیاً با این وجود سایتهای سازگار با استاندارد وب چه برتریی بر سایتهای ناسازگار دارند؟
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اولنش را یکی جواب بدهد ;) ، اما در مورد دومی: اولاً همچنان که دوست ندارم گمراهتان کنم دوست ندارم از مرحله هم پرتتان کنم ;) : این مشکل (عدم نمایش یکسان سایتهادر مرورگرهای مختلف) برای سایتهای سازگار با استاندارد وب بسیار کمتر از سایتهای ناسازگار اتفاق می‌افتد و در واقع معمولاً در جاهایی اتفاق می‌افتد که مرورگر در موارد خاصی اشکال نرم‌افزاری (باگ) دارد یا برخی از قابلیتهای مورد نیاز برای سازگاری با استانداردهای طراحی وب هنوز در نگارشهای فعلی آن پیاده‌سازی نشده است و با توجه به حمایت تمامی تولیدکننده‌های مرورگر وب از کنسرسیوم وب و استانداردهای وضع شده توسط آن باید انتظار آن را داشته باشیم که با برطرف شدن این ضعفها در نگارشهای بعدی آنها کمتر شاهد بروز این مشکلات باشیم (همچنان که مایکروسافت از سازگاری بیشتر اینترنت اکسپلورر ۷ با استانداردهای وب به عنوان یکی از نقاط قوت آن نسبت به ویرایشهای پیشین آن یاد می‌کند). ثانیاً برتری عمده‌ی رعایت استانداردهای وب آن است که مشکلات مرورگرها با آن تا حدود زیادی مستند شده است. پیدا کردن علت این گونه مشکلات برای صفحات سازگار با استانداردهای وب بسیار سریع‌تر و آسان‌تر انجام می‌پذیرد تا سایتهای ناسازگار با این استاندارد.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
علی‌الحساب این تذکر را -که سازگاری کامل با استاندارد وب دلیلی بر نمایش یکسان صفحه‌ی وب در مرورگرهای مختلف نیست- فقط جهت آن دادم که در مواجهه با استثناها (در مقیاس آماری) خیلی شگفت‌زده نشوید و ایمانتان را از دست ندهید ;) . وگر نه میزان وقوع این مشکلات کمتر از آن چیزی است که باعث شود نمایش مشابه صفحات استاندارد در مرورگرهای مختلف را از جمله برتریهای رعایت استانداردهای وب ندانیم!
</p>
<h3>(۲)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
بین مرورگرهای وب <a href="http://www.opera.com">اپرا</a> معروف است به این که بیش از همه با استانداردهای طراحی وب سازگار است. آنقدر سازگاری با استانداردهای طراحی وب برای سازندگان این مرورگر مهم بوده که در عناوین کلیک راست این مرورگر عنوانی برای آزمایش سازگاری صفحه با این استانداردها در نظر گرفته شده است:
<img src="http://www.gozir.com/logman/wp-content/uploads/2007/06/opera-validate.gif" alt="Validate در Opera" class="centered" />
 <p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
به این ترتیب اگر کاربر اپرا هستید می‌توانید با استفاده از قابلیتهای این مرورگر همیشه از سازگاری صفحاتتان با استانداردهای طراحی وب مطمئن شوید. البته <a href="http://www.gozir.com/1385/05/08/why-firefox/" title="می دانم لینک دادنهای پشت سر همم به این نوشته خیلی ضایه است ولی خوب چه کار کنم که این حد از ضایهی برایم غیرقابل پرهیز است ;)">من به شخصه از مرورگر دیگری استفاده می‌کنم</a>!
</p>
<h3>(۳)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
استانداردهای طراحی وب تلاش می‌کنند ما را وادار کنند صفحات وب بهتری طراحی کنیم. «بهتر» هم به معنی خواناتر است، هم به معنی دسترسی آسان‌تر و هم به معنی سریع‌تر. برای دستیابی به این اهداف این استانداردها یک سری «پیشنهاد» برای طراحان وب دارند که رعایت آنها حتی از رعایت قوانین فرمولبندی شده‌ی کنسرسیوم وب مهم‌تر است و حتی بسیاری، استانداردهای طراحی وب را با این پیشنهادها (و نه با خطایابهای برخط کنسرسیوم) می‌شناسند!
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
یکی از مهم‌ترین این پیشنهادها این است که طراح وب باید محتوا را از طراحی صفحه کاملاً جدا کند. به گونه‌ای که بتوان بدون دستکاری در محتوی و تنها با تغییر فایلهای مرتبط با طراحی، نمای صفحات را عوض کرد! یکی از بهترین نمونه‌های پیاده‌سازی شده‌ی این پیشنهاد، مجموعه‌ی جالب <a href="http://www.gozir.com/1385/06/24/csszengarden/">CSS Zen Garden</a> است که در آن تنها با تغییر یک فایل CSS طراحی یک صفحه‌ی ثابت گاهی به معنای واقعی کلمه «از زمین تا آسمان» فرق می‌کند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
از دیگر موارد پیشنهادی استانداردهای طراحی وب -که در واقع نتیجه‌ی مستقیم پیشنهاد قبلی است- آن است که از «جدولها» فقط برای «نمایش داده‌های جدولی» استفاده شود و نه برای طراحی ظاهر سایتها. استفاده از جدول (table) برای طرح‌ریزی قالبهای صفحات وب تا همین چند سال پیش با رواج استفاده از نرم‌افزارهایی با اشکالات ساختاری در طراحی همچون <acronym title="Frontpage">مایکروسافت فرانت پیج</acronym> معمول بود. از مشکلات عمده‌ی استفاده از جداول برای ایجاد نمای صفحات می‌توان به آمیخته شدن متن و محتوای صفحه‌ی وب با طراحی آن و همچنین نمایش کند و پر اشکال این گونه صفحات در مرورگرهای وب اشاره کرد (مرورگرهای قدیمی‌تر برای نمایش درست این گونه صفحات به دلایلی مجبور بودند دو بار صفحه را از میزبان سایت دریافت کنند!).
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
رعایت پیشنهادهای ذکر شده از جمله مواردی است که تأثیر مستقیم بر سازگاری بیشتر صفحات وب با نیازهای موتورهای جستجو دارد. چرا که برای آنها محتوای به دردبخور را از کدهای طراحی جدا می‌کند و آنها را در تشخیص اصل محتوا از ضایعات صفحات یاری می‌دهد.
</p>
<blockquote>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
الف) <strong>اخطار و درخواست:</strong> این سومین مطلبی است که در مورد استانداردهای طراحی وب می‌نویسم و این در حالی است که من یک طراح حرفه‌ای وب نیستم و تا به حال هم تنها جهت رفع نیازهای شخصی خودم صفحه‌ی وب درست کرده‌ام. مطالبی که تا به حال خواندید و احتمال دارد بعداً هم ادامه‌ی آنها را بخوانید برداشتهای شخصی من از این مقوله هستند و خیلی مستند و علمی نیستند. از کسانی که در زمینه‌ی استانداردهای طراحی وب اطلاعات دارند خواهشمندم اگر در اظهارنظرها یا توجیهات من موارد گمراه کننده و غلط مشاهده می‌کنند تذکر دهند تا تصحیح کنم یا حداقل اظهارنظرشان پای نوشته بماند تا ضلالت من زیاد سرایت نکند ;) .
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
ب) این نوشته را به <a href="http://www.gozir.com/1386/03/11/web-standards-part2/#comment-8721">سروش</a> تقدیم می‌کنم!
</p>
</blockquote>
<p style="text-align:left">سعی می‌کنم که ادامه داشته باشد ...</p>]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1386/03/21/web-standards-part3/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>برای فهم مطالب این سایت باید چند سال درس خوانده باشید؟!</title>
		<link>http://www.gozir.com/1386/03/12/sitescore/</link>
		<comments>http://www.gozir.com/1386/03/12/sitescore/#comments</comments>
		<pubDate>Sat, 02 Jun 2007 13:15:35 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/1386/03/12/sitescore/</guid>
		<description><![CDATA[
ابزارهای زیادی هستند که سایتها را آنالیز می‌کنند و بر اساس معیارهای خاص خودشان به آنها نمره می‌دهند، اشکالات آنها را گوشزد می‌کنند و پیشنهادهایی برای بهبود آنها ارائه می‌کنند.


سایت Sitescore به نظرم یکی از بهترین این سایتهاست که قبلاً هم اشاره‌ای به نشانی آن کرده بودم. در هر صورت، مدتی ابزار تحلیل این سایت [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
ابزارهای زیادی هستند که سایتها را آنالیز می‌کنند و بر اساس معیارهای خاص خودشان به آنها نمره می‌دهند، اشکالات آنها را گوشزد می‌کنند و پیشنهادهایی برای بهبود آنها ارائه می‌کنند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
سایت <a href="http://www.sitescore.org">Sitescore</a> به نظرم یکی از بهترین این سایتهاست که قبلاً هم <a href="http://www.gozir.com/1385/09/13/e-narcissism/">اشاره‌ای</a> به نشانی آن کرده بودم. در هر صورت، مدتی ابزار تحلیل این سایت در دسترس نبود تا این که اخیراً نگارش جدیدتری از آن ارائه شده که قابلیتهای جالبی دارد.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
یکی از قابلیتهای جالب جدید (فکر می‌کنم البته) این سرویس آن است که متن صفحات سایتها را می‌خواند و بر این اساس تعیین می‌کند که برای فهم نوشته‌های این سایت لازم است مخاطب چند سال درس خوانده باشد و چه تحصیلاتی داشته باشد! به این ترتیب به میزان خوانایی متن نوشتار سایتها نمره می‌دهد. به عنوان نمونه طبق تشخیص این سایت، برای فهم نوشته‌های سایت <a href="http://www.mozilla.org">موزیلا</a> لازم است مخاطب شانزده و خرده‌ای سال درس خوانده باشد. از این رو نوشته‌های این سایت خیلی آسان فهم نیستند و خوانایی این سایت نمره‌ی پایینی می‌گیرد. ببینید:
</p>
<a href="http://www.sitescore.org/report?url=www.mozilla.org"><img src="http://www.gozir.com/logman/wp-content/uploads/2007/06/mozilla-readability.jpg" alt="www.mozilla.org readability" class="centered" /></a>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اما برای درک مطالب سایت <a href="http://www.cssplay.co.uk">www.cssplay.co.uk</a> -که فعلاً بالاترین نمره‌ی کلی را در بین سایتهای ارزیابی شده دریافت کرده- یازده و خرده‌ای سال تحصیلات مدرسه‌ای کافی است و از این رو این سایت از لحاظ خوانایی وضعش بهتر است:
</p>
<a href="http://www.sitescore.org/report?url=www.cssplay.co.uk"><img src="http://www.gozir.com/logman/wp-content/uploads/2007/06/cssplay-readability.jpg" alt="www.cssplay.co.uk readability" class="centered" /></a>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
البته همانطور که احتمالاً می‌توانید حدس بزنید این قابلیت فعلاً فقط برای سایتهای انگلیسی‌زبان قابل استفاده است و هر چند قول این داده شده که این ابزار برای زبانهای دیگر هم در دسترس قرار گیرد اما آنچه مسلم است و به تجربه ثابت شده ما فارسی‌زبانها حتی در آینده‌ای دور هم نمی‌توانیم انتظار پشتیبانی این ابزار یا ابزارهای مشابه آن را از زبانمان داشته باشیم :( .
</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1386/03/12/sitescore/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>استانداردهای طراحی وب (۲)</title>
		<link>http://www.gozir.com/1386/03/11/web-standards-part2/</link>
		<comments>http://www.gozir.com/1386/03/11/web-standards-part2/#comments</comments>
		<pubDate>Fri, 01 Jun 2007 15:47:24 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/1386/03/11/web-standards-part2/</guid>
		<description><![CDATA[
انتظار دارم قسمت اول این سری را قبل از مطالعه‌ی این مطلب خوانده باشید.

(۱)

اگر تجربه‌ی برنامه‌نویسی داشته باشید این چیزی را که می‌گویم خوب متوجه می‌شوید: زبانهای برنامه‌نویسی (حداقل آنهاییشان که تا به حال به بازار عرضه شده‌اند) نسبت به نقض قوانینشان حساسند و کوچک‌ترین تخلفی را نمی‌بخشند. مثلاً اگر شما دستوری را اشتباه تایپ [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
انتظار دارم <a href="http://www.gozir.com/1386/03/11/web-standards-part1/" title="استانداردهای طراحی وب (۱)">قسمت اول این سری</a> را قبل از مطالعه‌ی این مطلب خوانده باشید.
</p>
<h3>(۱)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اگر تجربه‌ی برنامه‌نویسی داشته باشید این چیزی را که می‌گویم خوب متوجه می‌شوید: زبانهای برنامه‌نویسی (حداقل آنهاییشان که تا به حال به بازار عرضه شده‌اند) نسبت به نقض قوانینشان حساسند و کوچک‌ترین تخلفی را نمی‌بخشند. مثلاً اگر شما دستوری را اشتباه تایپ کنید تا وقتی اشتباه تایپیتان را تصحیح نکنید نسخه‌ی قابل اجرا برایتان نمی‌سازند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اما در زمینه‌ی وب تا حدودی جریان فرق می‌کند. در واقع زبان (؟!) <acronym title="html">اچ.تی.ام.ال</acronym> که صفحات وب با ترکیب دستورات آن درست می‌شوند علی‌رغم مشابهتهایی که با زبانهای برنامه‌نویسی دارد یک زبان برنامه‌نویسی به حساب نمی‌آید. اما به هر حال اینجا بازهم: یک سری دستور داریم (البته شاید «دستور» کلمه‌ی درستی نباشد برای آنچه <acronym title="tag">تگ</acronym> خوانده می‌شود) و یک سکوی اجرا کننده (یک مرورگر) که این دستورات را می‌خواند و به صورت ترکیبی از عناصر متنی و تصویری نمایش می‌دهد.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
خوشبختانه اچ.تی.ام.ال سختگیریهای زبانهای برنامه‌نویسی را ندارد: اگر شما دستورات را غلط بنویسید، تگهای باز شده را نبندید یا هر کار خلاف ;) دیگری بکنید مرورگر در هنگام خواندن متن اچ.تی.ام.ال غلطهای شما را نادیده می‌گیرد یا آنها را با استفاده از الگوریتمهای هوشمندش تصحیح می‌کند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
<em>اما آیا واقعاً این که مرورگر به طور هوشمندانه غلطهای ما را تصحیح کند همیشه خوب است؟</em>: صورت درست یک دستور یا تگ، احتمالاً منحصر به یک یا چند شکل محدود است. اما صورت غلط چطور؟ به چند حالت می‌توان یک دستور را غلط نوشت؟
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
در واقع مشکل نمایش نامشابه بسیاری از سایتهای اینترنتی در مرورگرهای مختلف تا حدود زیادی از همینجا نشأت می‌گیرد: مرورگرهای مختلف برای تصحیح غلطهای موجود در کد صفحه الگوریتمهای متفاوتی را به کار می‌گیرند. نحوه‌ی عملکرد این الگوریتمها معمولاً مشابهتی با همدیگر ندارد. در واقع شاید خیلی وقتها اگر موارد غامض و فاحش این اشتباهات دستوری را به آدمها هم بدهیم که صورت درستشان را پیدا کنند ممکن است با چندین جواب متفاوت روبه‌رو شویم که هر کدامشان بنابر توجیهات و سلیقه‌های ارائه شده می‌توانند درست باشند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
خوب! اگر ما می‌خواهیم صفحات سایتمان را همه‌ی مرورگرها شبیه هم نشان بدهند باید چه کار کنیم؟ احتمالاً بهترین راه حل آن است که دستورات را غلط ننویسیم تا نیاز نباشد مرورگرها در مورد صورت درست دستورات تصمیم‌گیری کنند و به خاطر تصمیمات متفاوتی که می‌گیرند صفحه‌ی ما را متفاوت نشان دهند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اما یک سؤال: صورت درست دستورات را کجا می‌توانیم بیابیم و چه ابزاری می‌تواند غلطهای ما را بگیرد تا بتوانیم صفحات وب بدون اشکال بسازیم؟
</p>
<h3>(۲)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
تعیین استانداردهای طراحی وب را کنسرسیومی بر عهده گرفته که در آن بیش از ۴۵۰ شرکت معتبر فعال در زمینه‌ی فناوری اطلاعات (از جمله مایکروسافت تولیدکننده‌ی مرورگر اینترنت اکسپلورر) عضویت دارند. مخفف نام این کنسرسیوم می‌شود W3C (<a href="http://www.w3.org" title="World Wide Web Consortium">کنسرسیوم شبکه جهانی وب</a>). این کنسرسیوم در <a href="http://www.w3.org">سایت خود</a> ابزارهایی را برای یافتن ایرادات صفحات وب و کمک به همخوان کردن آنها با استانداردهای وب در اختیار گذاشته است (در <a href="http://weblog.corelist.net/archives/2005/04/01/wasp-faq/" title="استانداردهای وب چیست و چرا باید از آنها استفاده کنیم ؟">این صفحه</a> و همچنین <a href="http://weblog.corelist.net/articles/wasp-faq/" title="سؤالات متداول">این صفحه</a> می‌توانید اطلاعات بیشتری راجع به این کنسرسیوم و استانداردهای طراحی وب به فارسی بیابید).
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اگر می‌خواهید همواره سایتتان با استانداردهای طراحی وب همخوانی داشته باشد لازم است پس از هر به‌روزرسانی، سایت خودتان را با استفاده از ابزاری که در <a href="http://validator.w3.org" title="The W3C Markup Validation Service">این صفحه</a> از سایت کنسرسیوم وب در دسترس قرار گرفته چک کنید و خطاهای آن را رفع کنید. W3C برای تسهیل انجام این فرایند، امکان این را فراهم کرده که صاحبان سایتها بتوانند با قرار دادن <a href="http://validator.w3.org/check?uri=referer">یک لینک پارامتردار به این صفحه در سایت خودشان</a> سریع‌تر و با زحمت کمتری این کار را انجام دهند. لوگوهای همخوانی با استاندارد کنسرسیوم وب در گام اول چنین کارکردی دارند. علاوه بر آن این لوگوها می‌توانند مبلغ پیروی سایتها از استانداردهای وب باشند.
</p>
<h3>(۳)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
بعضی وقتها احساس می‌کنیم استانداردهای وب زیادی سختگیرانه طراحی شده‌اند. مثلاً شما باید برای تمامی عکسهایی که در صفحات سایتتان استفاده می‌کنید -بلا استثنا- یک توضیح متنی ارائه کنید! واقعاً این کار چه لزومی دارد و چرا باید زمان زیادی را صرف برچسبگذاری عکسهایی بکنیم که شاید پیدا کردن معادل متنی برایشان سخت و زمانبر باشد؟
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
این قوانین به ظاهر سختگیرانه در واقع تلاش می‌کنند امکان استفاده‌ی افراد نابینا را از صفحات وب فراهم آورند یا آن را تسهیل کنند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
اما این کار مزایای دیگری هم دارد. مثلاً موتورهای جستجو در بازخوانی صفحات وب همانند نابینایان محدودیتهایی در پردازش تصاویر دارند. در صورتی که ما با ارائه‌ی توضیحات متناسب امکان این را فراهم آورده باشیم که افراد نابینا بتوانند موضوع تصاویر استفاده شده را تشخیص دهند در واقع به موتورهای جستجو هم کمک کرده‌ایم تا تصاویر ما را با متنهای مناسب برچسبگذاری کنند و آنها را در پاسخ <a href="http://www.gozir.com/1385/04/18/howto-search-better/">جستجوهای کاربران</a> در اختیار آنها بگذارند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
گفته می‌شود رعایت استانداردهای وب یکی از اصول اولیه‌ی فرایند <acronym title="Search Engine Optimization">بهینه‌سازی سایتها برای موتورهای جستجو</acronym> است. این فرایند که به طور خلاصه SEO خوانده می‌شود به سایتها کمک می‌کند تا جایگاه بهتری در موتورهای جستجو بیابند و در هنگام جستجوی واژه‌های متناسب نام آنها زودتر و بالاتر از سایتهای رقیب نمایش داده شود.
</p>
<p style="text-align:left">
شاید ادامه داشته باشد ...
</p>]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1386/03/11/web-standards-part2/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>استانداردهای طراحی وب (۱)</title>
		<link>http://www.gozir.com/1386/03/11/web-standards-part1/</link>
		<comments>http://www.gozir.com/1386/03/11/web-standards-part1/#comments</comments>
		<pubDate>Fri, 01 Jun 2007 10:13:16 +0000</pubDate>
		<dc:creator>حمیدرضا</dc:creator>
				<category><![CDATA[طراحی وب]]></category>

		<guid isPermaLink="false">http://www.gozir.com/1386/03/11/web-standards-part1/</guid>
		<description><![CDATA[
(۱)

چرا بعضی سایتها را اینترنت اکسپلورر درست نشان می‌دهد و فایرفاکس نه (سؤال انحرافی   : آیا درست آن چیزی است که ما درست می‌بینیمش؟!)؟! چطور می‌شود سایتها را طوری طراحی کرد که در همه‌ی مرورگرها یکسان دیده شود؟ آیا استانداردی در این زمینه وجود دارد؟

(۲)

تا به حال در وبگردیهایتان این آیکونها، تصاویر و [...]]]></description>
			<content:encoded><![CDATA[<br />
<h3>(۱)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
چرا بعضی سایتها را اینترنت اکسپلورر درست نشان می‌دهد و <a href="http://www.gozir.com/1385/05/08/why-firefox/">فایرفاکس</a> نه (سؤال انحرافی ;) : آیا درست آن چیزی است که ما درست می‌بینیمش؟!)؟! چطور می‌شود سایتها را طوری طراحی کرد که در همه‌ی مرورگرها یکسان دیده شود؟ آیا استانداردی در این زمینه وجود دارد؟
</p>
<h3>(۲)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
تا به حال در وبگردیهایتان این آیکونها، تصاویر و متنها را در گوشه و کنار صفحات دیده‌اید؟
</p>
<img src="http://www.gozir.com/logman/wp-content/uploads/2007/06/w3icons.gif" alt="لوگوهای همخوانی با استاندارهای وب" class="centered" />
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
می‌دانید اینها چه مفهومی دارند و چرا سازندگان سایتها آنها را -که فکر نمی‌کنم خیلی مشتری‌پسند و چشم نواز باشند- در دید می‌گذارند؟ آیا تا به حال روی آنها کلیک کرده‌اید؟ اگر این کار را کرده‌اید از صفحه‌ای که باز شده چه چیزهایی فهمیده‌اید؟
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue.gif" alt="Valid XHTML 1.0 Transitional" class="alignright" /></a> راستی! من چند روزی می‌شود که یکی از همین علامات غریبه را به گوشه‌ی سمت راست وبلاگم اضافه کردم. اگر کنجکاو شده‌اید ببینید اگر روی این علامت کلیک کنید چه می‌شود همین الان دست به کار شوید و بعد برگردید، بیایید تا بقیه‌اش را برایتان بگویم.
</p>
<h3>(۳)</h3>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
فراهم کردن امکاناتی که استفاده‌ی افراد معلول را از خدمات عمومی فراهم بیاورد در خیلی از کشورها الزامی است و افراد معلول در این کشورها می‌توانند از سازمانهایی که این موارد را در پروژه‌های خدماتی خود لحاظ نکرده‌اند شکایت کنند.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
به نظر شما آیا می‌شود امکاناتی فراهم کرد که افراد نابینا یا دچار نقص بینایی شدید بتوانند بهتر از سایتهای اینترنتی استفاده کنند؟ شاید طراحی سایتها به گونه‌ای که امکان بازخوانی آنها توسط نرم‌افزارهای مبدل <acronym title="text to speech">متن به صحبت</acronym> به راحتی فراهم آید، ارائه‌ی متن جایگزین برای عکسها و عناصر تصویری و مانند آنها بتواند مفید باشد.
</p>
<p style="text-align:right; direction:rtl; font:normal 12px tahoma;">
در سال ۲۰۰۰ میلادی دادگاهی در استرالیا دست‌اندرکاران برگزاری بازیهای المپیک سیدنی را -بر اساس شکایت فردی نابینا- به خاطر نحوه‌ی طراحی سایت اینترنتی این بازیها به پرداخت خسارت محکوم کرد. شاکی از این شکایت داشت که در طراحی سایت اینترنتی این بازیها ملاحظات مربوط به فراهم کردن امکان استفاده‌ی افراد نابینا از سایت لحاظ نشده است (<a href="http://www.zdnet.com.au/news/soa/Olympic-Web-site-told-to-pay-AU-20-000/0,139023165,120106727,00.htm">منبع</a>).
</p>
<img src="http://www.gozir.com/logman/wp-content/uploads/2007/06/whtcne.gif" alt="نماد عصای سفید" class="centered" />
<p style="text-align:left">
ادامه دارد ...
</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gozir.com/1386/03/11/web-standards-part1/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

