طراحی سایت جالب

۱۳۹۰ اردیبهشت ۲۰, سه‌شنبه

فرمها ( Forms )

از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه های ارسال (submit button) و يا reset را خواهيد داشت. اين فصل با شرح تگ های form و input و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسی خواهد پرداخت.
توجه داشته باشيد که برای پردازش اطلاعات دريافتی از کاربر بايد با يکی از زبانهای cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائی داشته باشيد. مثالهای cgi مدرسه وب از ربان اسکريپت Perl یا PHP استفاده ميکنند.
مثالها:

وروديهای متن يا Text fields
مثالی ساده در مورد ايجاد text field ها . با کمک text field ها کاربران قادر به وارد کردن و تايپ اطلاعات متنی خواهند شد.
وروديهای رمز عبور يا Password fields

مثالی ساده در مورد ايجاد password field ها . با کمک password field ها کاربران قادر به ورود رمز عبور يا پسورد خواهند شد، مرورگرها برای امنیت اطلاعات رمرزهای عبور را رمزگذاری میکنند و معمولا از '*' برای نمایش اطلاعات استفاده میکنند.
مثالهای بيشتر

فرمها (Forms) تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفی ميشوند، طراح سايت را قادر به جمع آوری و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهی از عناصر و تگهای درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند پرداخت. ( تمامی تگهای مربوط به فرمها درون تگهای <form> و <form/> قرار ميگيرند. )
درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و منوهای drop-down و غیره.

تگ Input به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه ای به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضی از type های کاربردی خواهيم پرداخت:
وروديهای متن (Text Fields) اگر ميخواهيد که بازديدکننده اطلاعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار "text" استفاده ميشود.

کد اچتمل

نمايش توسط مرورگر

<form>
First name: 
<input type="text" name="firstname">
<br>
Last name: 
<input type="text" name="lastname">
</form>

<form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگی:
<input type="text" name="lastname">
</form>

توجه داشته باشيد که تگ <form> چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام size استفاده کنيد.
وروديهای Radio Buttons اگر ميخواهيد که بازديدکننده فقط یک گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنيد:

کد اچتمل

نمايش توسط مرورگر

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

<form dir="rtl">
<input type="radio" name="sex" value="male"> مرد
<br>
<input type="radio" name="sex" value="female"> زن
</form>

همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر است.
وروديهای Checkboxes اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چندین گزينه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنيد:

کد اچتمل

نمايش توسط مرورگر

<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>

<form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشين دارم
</form>

شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button) در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه "Submit" ، اطلاعات درون فرم توسط مرورگر به صفحه ای که شما تعیین میکنید ارسال خواهند شد. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url صفحه ای است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.
تعيين مقدار "submit" برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.

کد اچتمل

نمايش توسط مرورگر

<form name="input" action="form_action.php">
Username: 
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

<form name="input" action="form_action.php" dir="rtl">
نام کاربر
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متنی ساده است به سمت آدرسی (URL) که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان PHP با نام form_action.php در سمت سرور به دریافت و پردازش اطلاعات دریافتی خواهد پرداخت.
به یاد داشته باشید که آدرس قید شده در بخش action میتواند آدرس اسکریپتی در هامان سایت و یا سایت دیگری باشد، همچنین میتواند آدرسی نسبی یا مطلق باشد.

ورود متن فارسی در عناصری مانند Text field يا Text area:
همانطور که در مثالهای بالا مشاهده کردید در مورد المانهای Text field و Textarea مانند بسیاری دیگر از المانها با کمک شناسه dir میتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعیین کنید. ولی اگر کاربری ویندوز فارسی نداشته باشد، از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین خواهند بود!، در اینگونه موارد چه باید کرد؟
معمولا برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو روش زیر استفاده میکنند:

استفاده از اپلتهای جاوا یا استفاده از فلش

استفاده از زبان جاوا اسکریپت

مثالهای بيشتر حالتهای مختلف ورودی Input
در تگ input و با کمک شناسه type و مقادير مختلف برای آن ميتوان انواع مختلف اطلاعات را از وبگرد گرفت.
Checkboxes
مثالی در مورد نحوه تعريف فرمی متشکل از Checkbox ها
Radiobuttons
مثالی در مورد نحوه تعريف فرمی متشکل از Radio button ها
فهرست کرکره ای ساده
مثالی در مورد نحوه تعريف فرمی متشکل از drop down box ها یا فهرستهای کرکره ای
فهرست کرکره ای ديگر
مثالی در مورد نحوه تعريف فرمی متشکل از drop down box ها با تعيين پيش گزينه
Textarea
مثالی در مورد نحوه تعريف فرمی متشکل از Textarea ، ناحيه ای برای ورود بيش از يک سطر متن
تعريف فرمی با کمک دکمه يا button
مثالی در مورد نحوه تعريف فرمی با کمک دکمه يا button
ترسيم مرز در اطراف فرم
مثالی در مورد نحوه تعريف فرمی دلخواه و ترسيم مرزی بدور آن به همراه تعيين عنوانی برای فرم با کمک عنصر Fieldset
ارسال ايميل با کمک فرمها
مثالی در مورد نحوه ارسال ايميل با کمک فرمها
ساختن فهرستی از سايتهای مورد علاقه
مثالی در مورد نحوه استفاده از تگ فرم و منوهای کرکره ای و کمی جاوا اسکريپت برای ساخت فهرستی از سايتها

تگهای فرم

Start Tag	Purpose	کاربرد
<form>	Defines a form for user input	تعريف فرم ورود اطلاعات

<input>	Defines an input field	تعريف ورودی از نوع Input

<textarea>	Defines a text-area (a multi-line text input control)	تعريف ورودی متن چند سطری يا text-area

<label>	Defines a label to a control	تعريف برچسب يا label

<fieldset>	Defines a fieldset	تعريف fieldset

<legend>	Defines a caption for a fieldset	تعريف عنوان برای fieldset ها

<select>	Defines a selectable list (a drop-down box)	تعريف فهرستهای انتخابی يا drop-down box

<optgroup>	Defines an option group	تعريف option group ها

<option>	Defines an option in the drop-down box	تعريف گزينه ای از drop-down box ها

<button>	Defines a push button	تعريف دکمه فشاری، متفاوت با button تگ input

۱۳۸۹ شهریور ۲۱, یکشنبه

5 اصل مهم در انتخاب رنگ و طراحی صفحات وب

لیست زیر مشخصه هایی از رنگ ها را که هنگام طراحی باید مدنظر داشته باشید بیان میکند:

۱- رنگ ها اثر زیادی روی احساسات ما در ۹۰ ثانیه اول دیدن میگذارند .
۲- اثر رنگ میتواند بیننده را ترغیب به خرید یک جنس از شما کند.
۳- رنگ ها رفتار ما را در برابر یک موضوع فقط تشدید نمیکنند ، بلکه اثر خود را کاملا در رفتار ما نشان میدهند .
۴- اثر گذاری رنگ در فرهنگ های مختلف گوناگون است
۵- هر رنگ به تنهایی یک پیام مخصوص به چشم بیننده میفرستد .به قول مک لوهان ، رسانه همان پیام است.
روان شناسی رنگ ها
به طور کل ، رنگ ها دارای خصیصه های خاصی هستند که در زیر به بخشی از این مولفه های موجود در رنگ ها اشاره شده است :

• سفید :
اشاره دارد به صداقت ، پاکیزگی ، صمیمیت ، ملایمت و معاصر بود ن چیزی . سفید بهترین رنگ برای بک گراند های وب است . در تجارت سفید رنگ خستگی گیر و انرژی بخش است .

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

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

• آبی :
امنیت ، اعتماد ، مسئولیت پذیری ، سرما ، ایمان ، وفاداری ، وابستگی وجاه و جلال . آبی دومین رنگ عوام پسند است . در تجارت بمعنای ضمانت مالی است .

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

• قهوه ای :
تاثیر گذاری ، متانت ، توانگری مالی و کمک کننده بودن . قهوه ای رنگ کره خاکی ماست و در طبیعت بسیار فراوان است .

• خاکستری :
صمیمیت زیاد ، اعتبار و نفوذ و عملی بودن . در تجارت بمعنای سنت گرایی است .

• صورتی :
ملایمت ، شیرینی ، ظرافت و زنانگی ، خوب بودن ، بی گناهی و پرورش کودک .

• بنفش :
وقار ، معنویت ، شاهانه بودن ، عیش و نعمت ، دارایی ، اعتبار و نفوذ ، سوگواری و مهارت . در تجارت بزرگ نشان دادن است . بنفش طرفداری از سبک های هنرمندانه است.

• نارنجی :
سرزندگی و شوخی ، لذت و خوشگذرانی ، تعادل گرمایی ، تشویق کردن ، چالاکی و نیرو ، تحمل و بلند همتی .

• زرد :
نور خورشید ، گرمی ، خوشی ، نامردی ، ترسویی و حسادت . در تجارت درخواست از نوع روشنفکرانه است و برای تاکید نیز خوب است . زرد باعث افزایش تمرکز شده ، سوخت و ساز را زیاد میکند و سخت ترین رنگ برای چشم هاست .

• طلایی :
نشانگر گران بودن و پرستیژ است .

• نقره ای :
سرما ، علمی بودن و اعتبار و پرستیژ است .

پس وقتی میخواهید رنگی انتخاب کنید باید درباره بازار نهایی کار خود بیندیشید . چه احساساتی را میخواهید برانگیخته کنید ؟ اول کمی درباره چشم انداز احساسی هدفتان فکر کنید و نیز پیامی که از راه دید میخواهید منتقل کنید .
بعد رنگ خود را انتخاب کنید ! توجه داشته باشید که گرافیک صفحات وب ، امروزه نقش زیادی را در ارائه دکترین رفتار سازمانی الکترونیکی مراکز رسانه ای غرب به مخاطبان در اختیار دارند و LOGO ، BANNER ، TIZER ها ، فوق العاده در تحکیم مفاهیم به مخاطبان وبی موثر هستند.

منبع:microrayaneh.com

۱۳۸۹ شهریور ۱۷, چهارشنبه

پانزده لحظه فراموش نشدنی در تاریخ وب

بسته به اینکه شما چطور حساب کرده باشید، وبی که در مقابل ماست ۱۵ تا ۱۷ سال از سنش گذشته است. هر چند که هنوز این نوجوان مورد بحث ما زمان زیادی را تا بزرگ شدن در پیش‏رو دارد اما در عین حال، آنقدر بزرگ شده است که بتوانیم در مورد لحظاتی از عمرش صحبت کنیم؛ لحظاتی کلیدی.
این لحظات، روز، ساعت یا دقایقی هستند که همگان را شگفت‏زده کرده‏اند. لحظاتی که کارگردانان موفق آنها، هنگام دیدن نتیجه کاراشان (ایده‏ای نو، آغاز به کار یک سایت، فروش اولین محصول و یا ذخیره اولین اطلاعات) فریاد شادی سرداده‏اند.
بجای ترتیب تاریخی ما این ۱۵ داستان را بصورت صعودی بر اساس اهمیت آورده‏ایم:

15. Drudge Report
در ۱۷ ژانویه ۱۹۹۸، Matt Drudge افتضاح اخلاقی موسوم به Monica Lewinsky را منتشر کرد.
یک روز پس از آنکه Newsweek افتضاح اخلاقی جدیدی در مورد کاخ سفید Clinton منتشر کرد، Matt در سایتش ، داستان Monica Lewinsky را فاش کرد. این موضوع از آن جهت اهمیت دارد که اولین خبر داغی است که قبل از نشریات چاپی و رسانه‏های تصویری، بر روی وب منتشر شده است؛ و البته آخرین بار هم نبود.
اتفاقاتی نظیر این باعث شد رسانه‏ها خصوصاً رسانه‏های ضعیفتر به این موضوع پی‏ببرند که با استفاده از روشهای سنتی نمی‏توانند با سرعت انتشار این ابزار جدید یعنی وب رقابت کنند. برخی از آنها تصمیم گرفتند که عنوان‏های خبری خود را قبل از چاپ بر روی اینترنت قرار دهند. حتی بعضی از آنها نسخه چاپی خود را کنار گذاشتند تا انحصاراً فقط بر روی اینترنت رسانه‏ای با نام آنها وجود داشته باشد. در هر حال رسانه‏ها به دو دسته تقسیم شدند: اول، رسانه‏هایی که تلاش کردند خود را با تغییرات جدید وفق دهند و دوم ،رسانه‏هایی که بخاطر عدم مدیریت صحیح از صحنه کنار گذاشته شدند. دوره خبرهای اینترنتی آغاز شده بود.

14. Yahoo
در فوریه ۱۹۹۴، Jerry و David سایت یاهو را راه اندازی کردند.
در اوایل ۱۹۹۴، دانشجویان دکترای دانشگاه استنفورد، Jerry Yang و David Filo ، لیستی از سایتهای مورد علاقه‏شان را بر روی وب قرار دادند. اینکه در کدام روز فوریه بوده است در < تاریخچه یاهو درج نشده است! اما می‏دانیم عنوان این لیست منتشر شده “Jerry and David’s Guide to the World Wide Web” بوده است. در آپریل ۱۹۹۴ در سایت آنها عنوان دیگری قرار داده شد “Yet Another Hierarchical Officious Oracle” یا همان Yahoo که خیلی زود بر سر زبانها افتاد.
سایت Yahoo را می‏توان آغازگر دسته‏بندی سایتها در وب دانست. هنگامی که پوشش کامل اینترنت ناممکن بود Yahoo بعنوان یک پرتال اینترنتی امکان جستجوی اینترنتی، عناوین خبری، پیام‏رسانها، پست الکترونیک، تصاویر، آگهی‏های استخدام و موارد بسیاری دیگر را در خود جای داد. در حالی که دیگر پورتالهای مشهور آن زمان مانند Lycos و Excite یا در حال نزول بودند و یا توسط ماهی‏های بزرگتر در حال شکار شدن بودند، این سایت همچنان به صعود خود ادامه می‏داد. هر چند که Yahoo در رقابت با Google چندان خوش‏شانس نبود اما تاریخ وب شاهد موفقیتهای بسیاری است که در آنها نام Yahoo می‏درخشد.

13. Blogging Katrina
در ساعت ۱۲ عصر ۲۸ آگوست ۲۰۰۵، وبلاگ “The Survival of New Orleans ” شروع بکار کرد.
در حالی که طوفانهای ساحلی در نیواوریلنز این شهر را ویران می‏کرد Michael Barnes در وبلاگش اینگونه نوشت: “ما در طبقه‏های دهم و یازدهم یک آسمان خراش در خیابان پودراس، در سمت راست خیابان چارلز هستیم. در اینجا ژانراتور، کنسرو غذا و آب داریم. ما کلاً ۵ نفریم. من مطمئن نیستم که ارتباط ما با اینترنت متصل باقی بماند. من یک دروبین و یک اسلحه همراه خود دارم… اینجا دائماً طوفان است و سرعتش بین ۱۷۵ تا ۲۱۵ کیلومتر بر ساعت است. طوفان باد را از سمت خلیج به سمت دریاچه می‏کشاند. شهر ممکن است هیچگاه به حالت قبل برنگردد. خودم می‏دانم، شاید این حرفها خیلی عارفانه باشند.”
بنابراین شاهدی با یک نام کاربری فاجعه‏ای طبیعی‏ای که در آنجا می‏گذشت را روایت می‏کرد. برای ۵ روز Barnes و دیگر همکارانش تلاش کردند تا از این طوفان فرار کنند و در طول این مدت گزارشات و تصاویری از پناه‏گاهشان و آنچه می‏گذشت در وب منتشر می‏کردند. ده‏ها هزار شهروند اینترنتی هر روز به این وبلاگ می‏آمدند و گزارشاتی که در CNN و New York Times هم یافت نمی‏شد را می‏خواندند.
این موضوع ثابت کرد که برخلاف تصور برخی، وبلاگها تنها نوشته‏های درهم و نظرات پراکنده افراد مختلف نیستند؛ بلکه می‏توانند آنقدر مهم و تأثیرگذار باشند که مطالبشان در تاریخ ماندگار شود.

12. eBay
در سوم سپتامبر ۱۹۹۵،eBay اولین حراجش را انجام داد.
مدت زیادی از زمانی که تنها راه فروش اثاثیه بدردنخور منزل، قرار دادنشان در حیاط برای فروش بود نگذشته است. چیزی که eBay آنرا دگرگون کرد. در حال حاضر دهها هزار شرکت کوچک و متوسط تجاری eBay را اصلی‏ترین ویترین محصولات خود می‏دانند. بر اساس آنچه که eBay می‏گوید اولین چیزی که در eBay بفروش رسید یک اشاره‏گر لیرزی شکسته بود که به قیمت ۱۴/۸۳ دلار حراج شد. اما اینک، چندین میلیارد دلار ارزش نقل و انتقالاتی است که در این سایت انجام می‏شود.
eBay اولین سایتی است که ایده کار اینترنتی را بنیانگذاری کرد. این نظر Chris Dellarocas، استاد تجارت دانشگاه مریلند است که بر روی ظهور کارهای اینترنتی تحقیق می‏کند. چیزی که ما را به جهانی مجاری سوق می‏دهد که از طریق آن می‏توانیم یک کار پیدا کنیم و یا در مدرسه‏ای ثبت‏نام کنیم و شاید هم بتوانیم همکلاسی قدیمی خود را بیابیم.
“واقعیتی که eBay از طریق آن توانست بازاری را ایجاد کند که ۶۰ میلیون نفر در آن فعالیت کنند، تلاشهای اساسی و پایه‏ریزی شده‏ای بوده است.” Dellarocas ادامه می‏دهد: “آنها آن را به اندازه کافی قابل اعتماد ایجاد کرده‏اند که من بتوانم پولم را برای مردی در آلمان که تا کنون او را ملاقات نکرده‏ام ارسال کنم و مطمئن باشم که او محصولش را برایم ارسال خواهد کرد. این باعث می‏شود که ما با هر کس و در هر مکان بتوانیم معامله کنیم.”

11. Wikipedia
15 ژانویه ۲۰۰۱، Wikipedia اولین پستش را ارسال کرد.
همه می‏توانند کارشناس باشند. این موضوع کاملاً در Wikipedia ثابت شده است. دایرة‏المعارفی آنلاین، که هر کس بی‏توجه به تخصصش می‏تواند مطلبی به آن اضافه و یا مطالبی از آن را ویرایش کند. Wikipedia در حال حاضر ۲ میلیون مقاله به انگلیسی (۷ میلیون در مجموع) از Aaargh! (یک بازی کامپیوتری) گرفته تا ZZZap! (یک برنامه تلویزیونی برای کودکان) در خود جای داده است.
Wikipedia مجموعه‏ای بی‏پایان از بحثها، ویرایشها، بازنگری‏ها و آرشیوهاست. نتیجه آن، گسترش مطالبی مختلف و بدون سانسور است که کاربران هنگام جستجوی یک موضوع از طریق موتورهای جستجوگر در اولین نتیجه جستجو به آنها وارد می‏شوند.
مؤسس این سایت Jimmy Wales ، موضوع اولین پست این سایت را بخاطر ندارد. ولی می‏گوید اولین جمله‏ای که در نرم‏افزار Wikipedia تایپ کردم عبارت “Hello World!” بود.
“من فکر می‏کنم Wikipedia نتیجه طرز تفکر مردم در مورد موضوعات مختلف است؛ همانطور که مثلاً در مورد پیاده کردن امنیت در یک جامعه می‏اندیشند.” Wales ادامه می‏دهد: “ما به شدت مراقب دروازه‏های اطلاعاتی بودیم. اما Wikipedia حرکتی برای باز کردن این دروازه‏هاست تا به شما اطمینان دهد که می‏توانید براحتی اطلاعاتی اضافه کنید و اطلاعاتی سانسور نشده را بخوانید.”

10. Friendster
مارچ ۲۰۰۳، Friendster ارتباطات را برقرار کرد.
My Space و Facebook هر دو از بهترین سایتهای شبکه اجتماعی هستند. اما نام هیچکدام از این دو اینجا نبود اگرFriendster وجود نمی‏داشت. در مارچ ۲۰۰۳، درهای دیجیتال آن بسوی عموم باز شد. این سایت آغازگر شبکه‏های اجتماعی تحت وب بود.
سازنده این سایت، Jonathan Abrams ایده ساخت این سایت را زمانی می‏داند که برخی سایتهای کم‏ارزش دوستیابی را دیده بود. او می‏گوید: “من می‏خواستم کاربران یک تجربه متفاوتی در اینترنت داشته باشند بنحوی که بین این دنیای آنلاین و واقعی ارتباط واقعی وجود داشته باشد. در واقع زندگی واقعی آنها را بهمراهشان به اینترنت بیاورد.”
در جولای ۲۰۰۳ Friendster، یک میلیون کاربر داشت. اما Friendster بسیار آهسته‏تر از رقبابش پیش می‏رفت و برخی تصمیمات غلط هم این وضعیت را بدتر کرد. با این حال Friendster در حال حاضر هم یکی از اصلی‏ترین سایتهای ارتباطات اجتماعی تحت وب است. همچنین Abrams سایت Socializr را ایجاد کرد؛ سایتی که مردم کمک می‏کند تا برنامه‏های روزمره خود را در دنیای واقعی برنامه‏ریزی کنند.

9. Craigslist
در ۲۴ اکتبر ۲۰۰۵، Craig Newmark لیست خود را منتشر کرد.
همانند بسیاری از اتفاقات مهم تحت وب، Craigslist با یک پروژه غیرتجاری شروع شد. در مارچ ۱۹۹۵، Craig Newmark که یک مهندس کامپیوتر در شرکت Charles Schwab سانفرانسیسکو بود محل کارش را ترک می‏کند. او لیست ایمیلی ایجاد می‏کند که اعضای آن می‏توانستند مطالب مورد علاقه‏شان را در خصوص جزیره‏شان با دیگر اعضا به اشتراک بگذارند.
” آن روزها، از این که می‏دیدم مردم در شبکه چقدر به یکدیگر کمک می‏کنند تحت تاثیر قرار گرفته بودم.” او می‏گوید “از طریق همین ایمیلها در حالی که لیست اعضا در حال افزایش بود مردم نیز شروع به ارسال مطالبی در خصوص اجاره آپارتمان، کار و سایر موضوعات کردند.” در اکتبر همان سال او لیست را بر روی اینترنت برای استفاده همگان منتشر کرد.
در سپتامبر ۱۹۹۷ این لیست به سایت Craigslist.org تغییر نام پیدا کرد. در اوایل ۱۹۹۸، این سایت مبلغ کمی بابت هزینه‏های تبلیغ کار دریافت می‏کرد اما در عین حال بسیاری از تبلیغات دیگر کاملاً رایگان بر روی سایت قرار می گرفتند. و بالاخره در سال ۱۹۹۹، این سایت شروع به پرداخت حقوق به پرسنلش کرد.
در حال حاضر ۴۵۰ نسخه محلی Craigslist در ۵۰ کشور دنیا وجود دارد و بیش از ۲۵ میلیون نفر هر ماه از آنها بازدید می کنند. این سایت نسخه اینترنتی نیازمندی‏هایی است که تا پیش از آن تنها در روزنامه‏ها منتشر می‏شد.

8. Oddpost
در ۱۶ فوریه ۲۰۰۳، سرویس وب‏میل Oddpost شروع بکار کرد.
تا سال ۲۰۰۳ هر کس که ایمیل در Yahoo یا Hotmail داشت در کنار آن هم یک نرم‏افزار مدیریت ایمیل هم روی کامپیوترش نصب بود. و دلیل آن هم این بود که کار کردن با خود وب‏میل بسیار طاقت‏فرسا و زمانبر بود. ایجاد هر تغییری در اینباکس و یا حذف اسپم محتاج طی مراحل مختلف و کلیکهای متعدد بود.
Oddpost نرم‏افزاری تحت وب ایجاد کرد که کار کردن با آن مثل این بود که آن نرم‏افزار بر روی هارد کامپیوترتان نصب شده. مدتی بعد Yahoo این شرکت را خریداری و از تکنولوژی آن برای سرویس وب‏میل‏هایش استفاده کرد.
Oddpost بسیاری از چیزهایی که تا قبل از آن تنها از طریق نصب برنامه بر روی هارد انجام می‏شد را شبیه‏سازی کرد (از طریق زبانهای تحت وب، نظیر AJAX و Ruby on Rails). برای اولین بار از نرم‏افزارهای واژه‏پرداز، صفحه‏گسترده و ویرایشگر تصاویر که همه آنها تحت وب بودند پرده برداشت و اینگونه برنامه های تحت وب رایج شدند.

7. URL
در ۲۳ جون ۱۹۸۳، DNS متولد شد.
از Paul Mockapetris، Craig Partridge و در آخر از Jon Postel متشکریم که باعث شدند مجبور نباشید برای ورود به سایت PC World عدد ۷۰/۴۲/۱۸۵/۱۰ را تایپ کنید (این عدد IP سایت PC World است). آنها از طریق DNS (Domain Name System)، واسطی ایجاد کردند که کاربران بجای آدرس‏دهی عددی (۱۲ عدد در مبنای ۲) می‏توانند نام سایت را برای ورود به آن تایپ کنند. پس از وارد کردن این نام، مرورگر با مراجعه به سرورهای DNS (که وظیفه آنها نگهداری نام ماشین و آدرس IP آنها است) معادل عددی آنرا پیدا کرده و به این ترتیب از طریق مسیریابها ارتباط بین کامپیوتر کاربر و سایت مربوطه برقرار می‏شود.
در یکی از روزهای جون ۲۴ سال قبل، زمانی که اولین آدرس DNSی تست شد Mockapetris این موضوع را از طریق ایمیل اعلام کرد. او می‏گوید: “هیچکس فکر نمی‏کرد این موضوع اینقدر مهم باشد و بهمین خاطر ما حتی یک دوربین هم همراه خودمان نیاورده بودیم که از آن روز که بعدها بسیاری از آن یاد کردند عکس بگیریم.”
پس از آن، ۸ سال قبل از ایجاد WWW (World Wide Web) ماشینهای دیگری به شبکه اضافه شدند. اما امروز تعداد آنها بیش ۱۳۰ میلیون است. بدون استفاده از DNS، برای آدرس دهی، این وبی که در حال حاضر پیش روی ماست وجود نمی‏داشت.

6. مرورگر گرافیکی
در ساعت ۱ عصر ۱۵ مارچ ۱۹۹۳، مرورگر گرافیکی متولد شد.
Marc Andreessen و Eric Bina هر دو از دانشجویان معمولی دانشگاه Illinois بودند. زمانی که آنها اعلام کردند نسخه آزمایشی گرافیکی Mosaic تحت ویندوز برای دانلود آماده است نمی‏دانستند این کار آنها چه تاثیری در مسیر حرکت اینترنت دارد.
طراحی قابل قبول بود؛ بجای اینکه تصاویر در پنجره‏ای جدا باز شوند در میان نوشته جا می‏گرفتند. نسخه Mosaic مورد استقبال گرفت و نسخه‏های تحت سیستمهای عامل دیگر نیز طراحی شد.
تقریباً یکسال پس از این ماجرا Andreessen با Silicon Graphics قرارداد همکاری بست (که بعدها به Netscape تغییر نام پیدا کرد). مایکروسافت مجوز استفاه از کد NCSA Mosaic برای اولین ویرایش Internet Explorer را خریداری کرد. تکامل مرورگرها آغاز شد و اینترنت که پیش از آن تنها شامل متنهای ساده بود به‏سوی چندرسانه‏ای شدن پیش رفت.

5. Amazon
16 جولای ۱۹۹۵، Amazon تجاری شد.
سایتی که عنوان آن “بزرگترین انبار کتاب” است داستانهای بسیاری در خصوص مراحل تکاملش در خود جای داده است. مثلاً داستان زمانی که Jeff Bezos (بنیانگذار سایت Amazon) در ماشینی که همسرش، Mackenzie در حال رانندگی در مسیر منهتن و سیاتل بود، طرح تجاری خود را بر روی کاغذ می‏نوشت. یا زمانی که Bezos می‏خواست نام سایتش را Abra Cadabra بگذارد اما دوستانش می‏گفتند که Cadabra شبیه Cadaver (جسدی که برای تشریح از آن استفاده می‏شود) است و او را از این نامگذاری منصرف کردند. یا تبدیل گاراژی در واشنگتن که اولین مرکز Amazon شد و در آن زنگی وجود داشت که قرار بود هر زمانی که محصولی فروخته می‏شود آن زنگ به صدا درآید.
بر اساس برنامه زمانی رسمی این سایت اولین زنگی که به صدا در آمد مربوط به فروش کتابی با عنوان ” Fluid Concepts & Creative Analogies: Computer Models of the Fundamental Mechanisms of Thought” بود. خوشبختانه فروش این سایت محصولات دیگر (بجز کتاب) نظیر موزیکهای قابل دانلود و همچنین فیلمها را نیز در بر می‏گیرد.
این سایت انقلابی در دنیای تجارت تحت وب و خارج از آن ایجاد کرد و از سایتهایی بود که با شروع یک پروژه عجیب به موفقیت رسیدند.

4. LO!
در ساعت ۱۰:۳۰ عصر ۲۹ اکتبر ۱۹۶۹، اولین کلمه برای روی شبکه جابجا شد.
قبل از تولد وب، اینترنت بصورت بسیار ساده‏ای وجود داشت، و قبل از اینترنت نیز آرپانت بوجود آمده بود. اهداف ایجاد آرپانت به قبل از ۱۹۶۰ باز می‏گردد، پروژه‏ای که بسیار عقب‏تر از برنامه زمانی پیش‏بینی شده تا قبل از ۱۹۶۹ آماده بهره‏برداری نشد.
بالاخره در عصر ۲۹ اکتبر، پروفسور Len Kleinrock، ارتباط یک مین‏فریم در یوکلا را به یکی از مراکز تحقیقاتی استنفورد از طریق یک خط اختصاصی تلفن برقرار کرد. برای تست برقراری ارتباط، Kleinrock با دانشجویانش در یوکلا قرار گذاشته بود که در ابتدا کلمه “LOG” را ارسال شود و پس از دیافت این کلمه ماشین مقابل در جواب کلمه “IN” را ارسال کند. این محقق حروف L و O را ارسال می‏کند اما قبل از اینکه بتواند حرف G را هم بفرستد سیستم دچار مشکل شده و قفل می‏کند.
تلاش بعدی با موفقیت انجام شد اما این کلمه “LO” بود که بعنوان اولین کلمه جابجا شده بر روی شبکه در تاریخ ثبت گردید. همانند جمله “What hath God wrought?” که Samuel Morse برای تست تلگرف از آن استفاده کرد و یا جمله “Watson, come here, I need you.” که Alexander Graham Bell برای اولین بار در تلفن گفت.
” Morseو Bell از ما باهوش‏تر بودند.” این جمله را Kleinrock در مصاحبه‏ای در سال ۲۰۰۴ گفت. او ادامه می‏دهد: “آنها می‏دانستند که کاری تاریخی انجام می‏دهند. ما فقط مهندس بودیم و تلاش می‏کردیم که کارمان را درست انجام دهیم.”

3. Google
در ۷ سپتامبر ۱۹۹۸، Google شروع بکار کرد.
در سال ۱۹۹۵، هنگامی‏که Sergey Brin و Larry Page در دانشگاه استنفورد یکدیگر را ملاقات کردند علاقه زیادی به یکدیگر نداشتند. در ژانویه ۱۹۹۶، این دو وارد یک پروژه دانشجویی مشترک شدند. هدف این پروژه بهبود عملکرد موتورهای جستجوگر اینترنتی از طریق لحاظ کردن تعداد استفاده از لینک بازگشت یا همان Back در اولویت‏بندی نتایج جستجوهای بعدی بود.
در اوایل ۱۹۹۸ آنها یک دیتابیس اینترنتی در خوابگاه Larry، با هدف جمع‏آوری اطلاعات در خصوص لینکهای بازگشت به راه انداختند. یکی از اولین کسانی که پیشنهاداتی در خصوص این پروژه به آنها داد David Filo، یک از مؤسسان Yahoo بود (این سایت، یکی از موتورهای جستجوگر آن زمان بود.) که شاید هنوز هم افسوس این حماقتش را بخورد!
در سپتامبر ۱۹۹۸، شرکت گوگل ثبت شد و در دره سیلیکون پا به دنیای تجارت گذاشت تا مرحله دوم فعالیت خود را آغاز کند. بر خلاف آنچه که بسیاری از صاحبان شرکتهای دات‏کامی آن زمان (که بسیاری از آنها از بین رفته‏اند) تصور می‏کردند گوگل معتقد بود که پرسنل می‏توانند از راه دور با شرکت همکاری کنند و شرکت هم سودآور باشد. با قرار دادن حق رای به کاربران برای امتیاز دهی سایتها، گوگل در واقع به نرم افزاری تحت عنوان “وب ۲″ در کنار وب واقعی تبدیل شد.
در سال ۲۰۰۴ سهام این این شرکت در بورس ارائه شد. و بالاخره در سال ۲۰۰۶ انتشارات دانشگاه آکسفورد رسماً کلمه گوگل را به لیست لغات لغت‏نامه خود اضافه کرد و بعنوان یک فعل معنای آن را جستجو در اینترنت قرار داد .

2. Netscape
در ساعت ۹:۳۰ صبح ۱۹ آگوست ۱۹۹۵، Netscape وارد بورس شد.
بدون شک Netscape مرورگر خوبی بود. در تابستان ۱۹۹۵ در یک روز پربحث، هر سهم Netscape از ۲۸ تا ۷۵ دلار بفروش رسید .
Netscape نسبت به سایر شرکتهای اینترنتی که سهام خود را در بورس عرضه کرده بودند، نظیر Yahoo (آپریل ۱۹۹۶)، Amazon (می ۱۹۹۷)، eBay (سپتامبر ۱۹۹۸) و برخی دیگر وضعیت بهتری داشت.
در آن زمان کسی نمی‏دانست این شرکتها چگونه اینگونه سرمایه‏دار می‏شوند. و البته بسیاری از سایتها هم نتوانستند که نمونه آن نابودی بسیاری از سایتهای دات‏کامی در سال ۲۰۰۰ بود. اما پس از آن مروگر Netscape متوجه رقیبی سرسخت یعنی همان Internet Explorer مایکروسافت شد و جنگ مرورگرها آغاز شد. در نوامبر ۱۹۹۸، AOL Time Warner، Netscape را خریداری می‏کند. نام این مرورگر یادآور داستان Open-Source و پرتال AOL است.

1. ظهور WWW
در ۲۵ دسامبر ۱۹۹۵، وب وارد دنیای آنلاین شد.
مهمترین لحظه‏ای که بمحض بوجود آمدن وب در تاریخ آن ثبت شد. در صبح کریسمس ۱۹۹۰، Tim Berners Lee و Robert Cailliau در مرکز تحقیقاتی CERN در ژنو، ارتباط اینترنت را با اولین وب‏سرور برقرار کردند و بدین اینگونه هدیه کریسمسی باارزش به تمام کاربران آن دادند. بر اساس آنچه که در سایت Living آمده است Berners Lee در ابتدا برای اینکه بتواند سریع‏تر صفحات مشخصات صدها پروژه، نرم‏افزار و سخت‏افزار مورد استفاده در بخش انرژی فیزیکی CERN ژنو مشاهده کند برنامه‏ای نوشته بود که از طریق سیستم Hyperlink این ارتباطات را ساده می‏کرد. در سال ۱۹۹۰ Lee مرورگر ساده‏ای طراحی می‏کند که بر اساس سیستم Hyperlink کار می‏کرد. او و Cailliau در ادامه اولین صفحه وب را با عنوان “لیست تلفنهای مؤسسه CERN” ایجاد می‏کنند.
در آگوست همان سال، Lee اختراعش را به جهان یا حداقل بخشی از آن نشان می‏دهد . در اواخر سال ۱۹۹۲ تعداد وب‏سرورها ۵۰ عدد بود که این تعداد در دو سال بعدش به ۲۵۰۰ عدد رسید و این روند رشد ادامه یافت.
اولین تلاشها تنها برای برقرار ارتباط بود اما امروزه با وجود بیش از ۱۳۰ میلیون سایت دیگر وب ابزار اصلی زندگی روزمره ماست. که بر اساس Netcraft این تعداد هر ماه ۵ درصد افزایش پیدا می‏یابد .
وب دیگر هیچ جنبه‏ای از زندگی ما را دست نخورده باقی نگذاشته است. این همان واقعیتی است که باعث می‏شود شما این مقاله را از روی صفحه مانیتور بخوانید نه از روی کاغذ.

منبع :http://www.hiberd.com/

آيا شما بيننده هاي سايت خود را فراري مي دهيد؟

يا تا بحال فكر كرده ايد چرا سايت زيبايي كه طراحي كرده ايد به اندازه اي كه فكر ميكرديد بازديد كننده ندارد ؟ خوب شايد طراحي سايت شما مشكل داره … چيه ؟ بهتون برخورد ؟ زياد ناراحت نباشيد . چون ايرادات سايت شما رو الان بررسي ميكنيم . اين ايرادات باعث رنجيده خاطر شدن بازديد كننده هاي نازنينتون ميشه و درنهايت اونا كم كم اسم سايت شما رو فراموش ميكنند .(شما هم كه حساس ! )

1- PAGE CANNOT BE FOUND : بدترين چيز وجود لينك هاي شكسته در سايت است . هيچ چيز آدمو اينقدر عصباني نميكنه كه لينكي رو كليك كنه و با پيام PAGE CANNOT BE FOUND روبرو شه .

2- PAGE UNDER CONSTRUCTION : بهتره تا وقتي صفحه در حال ساخته لينك بهش ندين . چون باعث ميشه كه وقت بيننده شما در سايت تلف بشه !

3- MULTIPLE POP UPS : استفاده از پنجره هاي تبليغاتي بازشو بايد در زمان مناسب خودش باشه ، نه اينكه تا بيننده وارد سايت ميشه چند تا پنجره با هم باز شن و نذارن صفحه مورد نظرش رو ببينه . بيننده هاي سايتتون هيچ وقت شما رو بخاطر وقتي كه از اونا براي بستن اين پنجره ها تلف كردين نمي بخشند .

4- زمينه سياه : استفاده از زمينه سياه علاوه بر اينكه باعث ميشه متون داخل صفحه بسختي خونده بشن ، باعث ميشن سايت شما در حافظه نهان بيننده سايتي غير قانونمند و يا مزاحم بنظر بياد ( نكته روان شناسي ! )

5- متن ناخوانا : استفاده از متن هاي نامفهوم و پاراگراف هاي طولاني ذهن را خسته ميكند . هميشه از فونت هاي خوانا و با اندازه مناسب استفاده كنيد تا چشم در خواندن خسته نشود . استفاده از حالت هاي بولد و زير خط دار در جاي مناسب باعث خواناتر شدن متن شما ميشود .

6- عكس هاي بسيار بزرگ : استفاده از تصوير در طراحي سايت اهميت ويژه اي دارد . اما گاهي اين عكس ها بعلت حجم زياد مانع لود شدن سريع صفحه سايت شما ميشود و بيننده را ترغيب به بستن پنجره سايت شما ميكند ! هنگام استفاده از عكس حتما آن را با برنامه هايي مانند photoshop براي استفاده در وب بهينه كنيد تا از كمترين حجم ممكن بهره بگيريد .

7- فلش هاي ورودي سايت بدون دكمه skip : اگر دوست داريد در ورودي سايتتان يك فلش زيبا بگذاريد اشكالي ندارد . اما يادتان باشد كه حتما دكمه SKIP INTRO را در آن فلش تعبيه كنيد تا بيننده هايي كه ميخواهند مستقيم به اطلاعات سايتتان دسترسي بيابند پشت در هاي بسته فلش معطل نشوند .

8- عرض صفحه سايت بزرگتر از عرض مرورگر : اين مورد خيلي اهميت دارد . چون همه عادت دارند براي ديدن ادامه مطالب سايت بسمت پايين حركت كنند . نه چپ و راست . حالا اگه ميخواهيد بيننده خود را زجركش كنيد عرض سايتتون رو تنظيم نكنيد .

9- عكس هايي كه لود نميشوند : فرض كنيد وارد يك صفحه وب ميشويد تا مطلبي را بخوانيد . عكس مطلب مورد نظر لود نميشود ، چرا ؟ به هر دليلي . همين كافيست تا اعتبار سايت شما زير سوال برود .

منبع:macromediax.com