اگه خدا عادل باشه که هست، شماها همه باید جواب پس بدید.

اگه بخوام کاربردپذیری رو براتون خیلی کوتاه توضیح بدم، میتونم از قول سازمان بین‌المللی استانداردسازی و به نقل از سایت همایش کاربردپذیری بگم “ میزانی که یک محصول می‌تواند توسط کاربران خاصی برای رسیدن به هدفی معین، مورد استفاده قرار گرفته و در حین استفاده، ضمن داشتن اثربخشی و کارایی، رضایت کاربر را در زمینهٔ مورد استفاده تأمین کند.”

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

اولین موضوعی که میخوام در خصوصش براتون توضیح بدم اینه:

ظرفیت حافظه کوتاه مدت / قانون ۷±۲

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

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

 مثال دیگری که برای شما میارم منوی سایت گوگل خواهد بود. بله سایت گوگل هم از این قانون استفاده کرده. همه ما میدونیم که سایت گوگل سرویسهای بسیار زیادی داره. اما منوی سایت گوگل هم تنها حاوی هفت مورد هست و بقیه منوها رو توی یک گزینه به نام more قرار داده.

حالا کافیه که شما روی منوی هشتم که به خاطر سپردنش اصلا مهم نیست کلیک کنید:

در واقع شما نیازی به، بخاطر سپردن منوهای زیادی ندارید و با یک نگاه، به این منوها، گزینه های اون در حافظه کوتاه مدت شما خواهد موند و در حین گشت و گذار و استفاده از این سرویسها، مغز شما مدام آماده هست که از هرکدوم از این سرویسها استفاده کنه.

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

نظرات شما میتونه به بهتر شدن نحوه نگارش و محتوا و … کمک کنه.

درس زوری

سلام.

نمیدون چرا هروقت امتحانایی جز دروس تخصصی فناوری اطلاعات دارم، همچی یه بغضی این گلوم رو میگیره، انگار این بچه ها که به زور نشوندیشون غذا بخورنا، اشکاشون میاد پایین از رو لپشون، ولی غذا رو عین زهرمار میخورن، من الان دقیقا همونجوری شدم! آخه من نمیدونم، توی کار، توی بازار کار، فیزیک به چه درد من میخوره؟! نه شایدم میخوره، مصلا توی یه پروژه سازمان الکترونیک، باید حساب کنی که چندتا خازن میخوای برای پیاده سازی یه کامپیوتر برای اتاق منشی! آره! فیزیکم خوبه ها! ولی خب مجبورم باید بخونمش! اصن برامس سوال شده که اینایی که نشستن به وقل خودشون سرفصل و دروس رشته فناوری اطلاعات رو تعیین کردن، اصلا میدونستن این رشته چی هست؟! گمونم یکی بهشون گفته، چون مهندسیه، پس باید ریاضی و فیزیک و … داشته باشه، چون از خانواده کامپیوتر و مدیریت و صنایع هست، باید از اونها هم داشته باشه …. ای بـــابــــا! خسته شدیم!

بابا یکی نیست به اینا بگه عمو جون، میدونی چرا دانشجوی خارجی از دیار کفر داره توی فناوری اطلاعات ابداع و اختراع از خودش ساطع میکنه؟! چون داره همین چیزا رو میخونه! چون به زور نمیگن بیا بتمرگ فیزیک بخون! الان خیلی اعصابم ضعیفه! بهتره برم سر درسم، بعد از امتحانا، اگه به خیر گذشت و زنده موندیم، میام براتون کلی صحبت دارم.

درباره سرعت سایت خیلی مطالعه کردم، کلی زیاد! آره، فعلا خدانگهدار.

CSS Selection - انتخابگر متن در CSS

همیشه وقتی متنی از یک وبسایت رو با کلیک سمت چپ موسمون انتخاب میکنیم، یک رنگ آبی خاصی میاد زیرش. مثلا همین الان این جمله رو با موستون انتخاب کنید! میبینید که رنگ متن تغییر کرد (حالا زیرش آبی نشد ایندفعه) !

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

بله باور کنید، این امکان در CSS وجود داره! اما خب هر مرورگری هم نمیشناسه این رو! در ادامه خواهیم دید که تنها مرورگرهای وبکیت ( webkit ) و موزیلا و از همه جالبتر(!) اینترنت اکپلورر ۹ به بعد (خدارحم کنه!) اون رو پشتیبانی میکنن!

این رنگ به صورت پیشفرض در ویندوز یک رنگ آبی زشت هست! درحالی که مک کمی این رنگ رو آرومتر انتخاب کرده و کمی به کاربراش رحم کرده! :دی

برای استفاده از این امکان در CSS کافیه از کد زیر استفاده کنید:

/* webkit, opera, IE9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }

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

/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; }
/* mozilla firefox */
div.highlightBlue::-moz-selection { background:lightblue; }

/* webkit, opera, IE9 */
div.highlightPink::selection { background:pink; }
/* mozilla firefox */
div.highlightPink::-moz-selection { background:pink; }

این امکان بسیار ساده و خوب، میتونه یکی از نکات مثبت وبسایت شما باشه.

چقدر ساده بود. مگه نه؟

مدیریت استراتژیک در وب

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

یک وبسایت موفق باید در دو بعد بسیار مهم مدیریت شود.

1. مدیریت عملیاتی
2. مدیریت استراتژیک

۱٫ مدیریت عملیاتی

۲٫ مدیریت استراتژیک

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

همیشه عوامل بیرونی، تأثیرات بسیار حساسی در سازمان وبسایت دارند. به عنوان مثال وضعیت اقتصادی، سیاسی، فرهنگی جامعه و یا حتی خود اجتماع! میزان تأثیرات هر عاملی، در وبسایتهای مختلف، متنوع است.

همیشه بررسی عوامل بیرونی موجب پیشبینی چالش و محدودیت نمیشود؛ بلکه در بسیاری از موارد، با ذکاوت و هوشیاری تیم مدیریت استراتژیک، فرصت هایی به دست میآید که وبسایت ما را با رشدی غیرقابل باور روبرو میکند.

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

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

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

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

شما نقش مدیریت استراتژیک را در وضعیت فعلی وب ایران تا چه حد ضروری میدانید؟ آیا وقت آن نشده است که با نگاهی متفاوت، در فضای سایبر حضور به هم رسانیم؟

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

مدییرت استراتژیک، حلقه‌ی گم شده‌ی وب ایران

مجلس شورای ملی ترکیه

سناریوی اول (ایران، شیراز، استانداری):

منشی: حمایت از شما خلاف قوانین جمهوری اسلامی ایرانه! میری بیرون یا انتظامات رو صدا کنم؟
من: آخه چرا؟!

منشی:  گفتن شما رو به این بخش راه ندیم! بیرون آقا!
من: ……………… مــــــــــــــــــات ……………..

سناریوی دوم (ترکیه، آنکارا، مرکز پلیس ۱۵۵ آنکارا):

(مدارکم رو دزدیده بودن، رفتم گزارش بدم)
مترجم: دلیل سفرتون به ترکیه چی بوده؟
من: مسافرم، عازم نیویورک، به این دلیل (دعوتنامه رو نشون دادم)

مترجم داره با بقیه پلیسها صحبت میکنه.. رو به من: بفرمائید بریم …
من: کجا؟
مترجم: خواهش میکنم تشریف بیارید…. ( سه تا پلیس + مترجم اطراف من دارن راه میان و من رو میبرن بالا. … آسانسور … طبقه آخر … اتاق ته سالن، درب چرمی…. من هم ترسیده بودم خدائی! )
داخل اتاق کی بود؟ فرمانده پلیس ۱۵۵ آنکارا! کمی با مترجم صحبت کردن و بعد مترجم رو به من: خیلی خوش آمدید به ترکیه، باعث افتخار ماست. نسکافه میل دارید؟ ……سفر خوبی داشته باشید. حتما به کارتون رسیدگی میکنیم ….

کارم که تمام شد، یه ماشین پلیس من رو برد و کمی آنکارا رو گشتیم، بعد هم من رو رسوند جلوی هتل! شماره همراهش رو هم داد و گفت مشکلی پیش آمد با من تماس بگیر!

سناریوی سوم (ترکیه، آنکارا، سفارت آمریکا):

- اتمام مصاحبه
متصدی: برای تحصیلتون چه برنامه ای دارید؟
من: قصد دارم توی شیراز ارشد فناوری اطلاعات بخونم
متصدی: چرا شیراز؟!
من: شیراز رو دوست دارم.
متصدی: ما خوشحال میشیم که در سال ۲۰۱۱ شما رو اینجا جهت مصاحبه برای ادامه تحصیل در دانشگاههای آمریکا ببینیم. تسهیلات بسیار عالی به شما ارئه میدن. کافیه درخواستتون رو ارسال بفرمائید. دانشگاههای آمریکا در زمینه ی فناوری اطلاعات بسیار قوی …… (تبلیغ دانشگاههاشون……..)

یکی از پارکهای آنکارا

من آدم مهمی نیستم. ولی خب، یه ایرانی‌ام، و گذشته از اون یه آدمم. توی سفر اخیرم به ترکیه، به یک نکته ی بسیار جالب و ظریف برخوردم و درس گرفتم ازش! وقتی توی اجلاس جهانی جایزه جوانان برنده شدم، رفتم سراغ مشاور حوزه استاندار و سفرهای ریاست جمهور در استان فارس، گفتم من برای کشورم افتخار کسب کردم! برای استانم! برای شهرم، شیراز …. و برای خودم. ایشون فرمودند که اگر صحت ادعای من اثبات بشه، ازم حمایت میکنند و هزینه سفر رو میدن. راستش هزینه ی سفره من بعد از اتمام سفر توسط دفتر اجلاس پرداخت میشد و این مستلزم این بود که من هزینه سفرم رو داشته باشم. خب من گفتم کل هزینه رو برمیگردونم. ابتدای ماه رمضون بود. خدا میدونه، امسال روزه های من اندازه چهارتا ماه رمضون قبول شد! هررزو از ۸ صبح با زبون روزه، توی استانداری و سازمانهای تابعش مثل … پاسکاری میشدم تا ۲:۳۰ بعد از ظهر! گرمای امسال رو که خاطرتون هست؟ وقتی میرسیدم خونه، از فرط تشنگی از حال میرفتم! برا افطار بیدارم میکردن! خلاصه … خلاصه و خلاصه ….. اونقدر خلاصه که رسیدیم به دو هفته قبل از پرواز!

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

هرگونه حمایت از نامرده ( من رو میگفت ) بر اساس مصوبه شورای عالی انقلاب فرهنگی مورخ …. که به پیوست این نامه آورده شده است، خلاف قوانین جمهوری اسلامی یران میباشد….!

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

گفتن همین مقدارش براتون کافیه، بقیه نامه به درتون نمیخوره! گفتن شما رو راه ندم. میتونید برید.

گفتم یعنی چی؟! اینجا نوشته نامه به انضمام پیوست جهت ابلاغ به نامبرده! من باید باهاشون صحبت کنم! چرا اینهمه وقت من رو بیخودی الاف کردن؟ باید جواب بدن! گفت:

یا میری یا میگم انتظامات بیاد. فرمودن شما حق ورود به این بخش رو ندارید! بفرمائید بیرروووون!

رفتم پیش یکی دیگه از این کله گنده ها و گفتم چرا اینطوری کرده و …… گفت:

(با صدای بلند و تنفر تمام رو به من: ) مرد حسابی آمدی اصرار کردی، ایشون لطف کردن به کارتون رسیدگی کردن! حالا طلبکاری؟!!؟!؟ بیرو آقـــا … انتظامات ….

و من رفتم ……. چند هزار کیلومتر ……

یه صندلی خالی توی پارک، آنکارا، رفتم نشستم و کلی فکر کردم..

نتیجه گیری من از این واقعه

• فهمیدم که ما مدعی اتحادیم! چون اون آمریکائی ها متحدند که کارمند سفارتش داره مخ من رو میزنه که برم آمریکا و درس بخونم!
• فهمیدم که باید همه به هدف سازمان اعتقاد داشته باشن که بتونیم موفق بشیم!
• فهمیدم که چرا آمریکائی ها موفق میشن!
• فهمیدم که باید بگم دکتر حسابی، خیلی پاسخ زیبائی به دانشجوی اروپائی در جواب سوالش راجع به جهان سوم دادید!
• خیلی چیزا فهمیدم ….

هدف گلایه نبود، هدف نتیجه ای بود که من گرفتم!

نقطه سر خط!

قالب جدید گوگل و JPEG

30 سپتامبر ، یعنی شش روز پیش گوگل قالب ( فُرمَت ) جدیدی از تصاویر به نام WebP رو معرفی کرد. اینطوری نوشته میشه: WebP اما اینطوری خونده میشه: weppy . به دلیله یه سری معضلاتی که وجود داره، گوگل اقداماتی رو در جهت رفعشون داره انجام میده. حجم عظیم داده‌ها که بیشتر از نوع تصویر هستند ، در دیتاسنترهای سایتهای بزرگ از جمله گوگل ، باعث شده که گوگل به فکر کاهش حجم تصاویر از طریق تغییر قالب اونها بیافته.

اهمیت این موضوع بسیار بالاست و علی‌رغم اینکه تغییر قالب و فرهنگ‌سازی استفاده از این فرمت در دنیا کار سختیه (!) ، اما گوگل با قدرت و نفوذ و تأثیری که در دنیای وب داره ، به نظرم خیلی راحت میتونه در این قضیه یک انقلاب بوجود بیاره. اما حالا بیاید یه بررسی کنیم ببنیم که این WebP چی هست و چرا اهمیت داره!WebP قراره که پادشاه قالب تصاویر ، یعنی فرمت حجیم JPEG رو که همه ما دیدیم و میدونیم چی هست رو از تخت شاهی به زیر بکشه و خودش بره بشینه و سلطنت کنه. همیشه وقتی انقلابی میشه ، تغییراتی در روندها بوجود میاد که گاها مثبت یا منفی هست. خوب این تغییر فرمت هم مزیتها و معایب خودش رو داره دیگه.

WebP هم فرمت فشرده سازی پراتلافی مثل JPEG داره و ما نمیتونیم انتظار تصاویری با کیفیت بالاتری از اون داشته باشیم. اما به دلیل اینکه WebP از متد فشرده سازی متفاوتی به نام کُدِک متن‌باز VP8 گوگل استفاده میکنه. در این متد ما با کاهش ۴۰% حجم تصاویر مواجه میشیم! شاید بگید خب حالا چه کــــاریه؟! ولی باید به این نگاه کنیم که وقتی تمام تصاویر موجود در دیتاسنترهای گوگل تغییر قالب دادن ، هر یک ترابایت داده ، به ششصد گیگابایت داده تبدیل مشه!

WebP به دلیل استفاده از قالب جدید RIFF این امکان رو به توسعه دهنده و متخصصان میده که متادیتاهای ( metadata ) مختلفی رو در اونها ذخیره کنند. حتی علاوه بر متادیتا های فعلی، میتونیم در آینده جزئیات بیشتری رو توی اونها ذخیره کنیم! خب این خییل عالیه و میشه بگیم یک گام بسیار قدرتمند در عرصه وب خواهد بود!

گرچه در WebP حجم تصاویر ۴۰% کاهش پیدا میکنند، اما کیفیت تصاویر با JPEG تفاوتی نداره و این کاهش حجم تأثیری در کیفیت تصویر نخواهد داشت. البته باید صبرکنیم تا به طور قطع ببینیم که چه میزان تغییرات رو خواهیم داشت.

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

مقایسه JPEG و WebP

گوگل معتقده که بیش از ۶۵% اطلاعاتی که در وب نقل و انتقال پیدا میکنه تصویر و ویدئو هست. پس مسلما با این کاهش حجم ۴۰% تصاویر ، سرعت بارگذاری صفحات وب به میزان بسیار زیادی بالا خواهد رفت. علاوه بر این ، این موضوع موجب صرفه جوئی اقتصادی بسیار بالائی برای شرکت ها و وب سایهایی هست که روزانه حجم عظیمی از داده رو نقل و انتقال میدن. در وضعیت اقتصادی کنونی ، افزایش فروش سخته و سود رو کاهش هزینه ها تعریف میکنیم! بنابراین WebP یکی از بهترین راههای افزایش سود شرکتها خواهد بود. در نظر بگیرید که شبکه های اینترنت تلفن همراه هم توسعه پیدا کنند. خب مطمئنا اونها خیلی از این موضوع استقبال میکنند! ( البته بماند که اینجا ایرانه و مثلا ایرانسل براش فقط مهمه که شما چند بیت داده تراکنش داشتی تا از حسابت کم کنه! )

موانع

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

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

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

لینکهای مفید:

• WebP Home
• WebP vs JPEG Gallery
• Chromium Blog: WebP, a new image format for the Web
• Using WebP
• Comparative Study

نظر یادتون نره

حضرت پزشک

یه زمانی ، من یه جائی درس میخوندم. البته من و ما به سهم و به قدر توانمون میخوندیم، اما اونا درسی نمیدادند. خلاصه بگذریم که چی بود و چی شد و چه کارا که نکردن با بچه ها. همین ترم گذشته ، توی تیرماه وضعیت هوای ایران به طرز وحشتناکی رو به گرما برده بود و پدر ملت غیور رسماً داشت در میامد. سه شنبه امتحان ریاضیات گسسته داشتم. خب من باید از شیراز خودم رو میرسوندم به این امتحان. خیلی خونده بودم. مدارکشم موجوده. خلاصه روز دوشنبه میخواستم راه بیفتم که احساس ناراحتی شدیدی توی شکمم کردم. بعد از ظهر بود. حالم بد شد و من رو بردن نزدیکترین درمانگاه ببینن چمه. سرتون رو دردنیارم. دکتره گفت آقا روده موده هات عفونی شده و ایشالا اگه استراحت مطلق نکنی میمیری. گفتم امتحان دارم. ۱۲ ساعت باید بشینم توی اتوبوس! برم! گفت نه! اگه بری خونت گردنه خودته. خلاصه منم که جونم برام عزیز بود ، نرفتم. یه گواهی بهم داد گفت لازمت میشه. من زنگ زدم به دوستم و گفتم آره وضعیت اینه. خلاصه فرداشم یه زنگی زدیم به یکی از مسئولین و گفت که باید بیای دکتر ببنه حالت بده تا برات حذف پزشکی کنه!

گفتم یا شیخ ، این چیست که تو میگوئی؟ من اگر میتونستم بیام که خیره سرم امتحان میدادم! گفت پس یه مشت مدارک بیار برا پزشک معتمد و محترم! گفتیم چشم!

چند روز بعد که بهتر شده بودم مدارک که همون گواهی بود رو پست کردیم خدمت یکی از بچه ها که خدا خیرش بده تو اون گرما کارای من رو پیگیری کرده بود. برد و دکتر این جواب رو داد: “ایــن گواهی قابل قبول نیــست! باید از پزشک متخصص نامه بیاری که اونروز مریض بودی! گواهی پزشک عمومی قبول نیست!”

من گفتم جناب دکتر ، به نظر شما یکی که یهو حالش بد میشه ، چکارش میکنن؟ میرن براش نوبت دکتر متخصص میگیرن برا حداقل چند روز دیگه؟ یا میرسوننش به نزدیکترین درمانگاه؟

ایشون فرمودند که: به هر حال برا من این قضیه قابل قبول نیست! باید همون روز خودت میامدی پیشم!

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

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

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

مجدد توضیحاتی دادیم و این جواب را بشنیدیم: حالا بورو یه ده دقیقه دیگه بیا شاید پیدا بشه! گفتم مگه توی تنوره؟ برم بیام آمادست؟ از تنور بیرون آمده؟

پاسخی نگرفتیم و …….

بگذریم. این چنین شد که ما ترم قبل مشروط شدیم!

شما هم خسته نباشید.

آیا میدانید کاربران سایت توئیتر روزانه حداقل چقدر گازهای گلخانه‌ای تولید میکنند؟

توئیتر ، به عنوان گسترده‌ترین سایت میکروبلاگینگ جهان ، طبق آخرین آماری که در ماه فبریه سال ۲۰۱۰ رسما منتشر کرده ، روزانه حدود ۵۰ میلیون توئیت توسط کاربرانش ارسال میشه! حالا اگر حداقل زمان برای نوشتن یک توئیت ساده رو ده ثانیه و انرژی معادل ۲۵۰ وات بر ساعت برای هر کامپیوتر در نظر بگیریم ، انرژی معادل ۳۵ کیلو وات‌ساعت در هر روز صرف میشه!به ازای تولید هر یک کیلو وات‌ساعت انرژی ، ۰٫۶ کیلوگرم CO2 در هوا آزاد میشه! عددهای جالبی هستند مگه نه؟ خب وقتی یه حساب سرانگشتی کنیم میبینیم که در نهایت ، روزانه ۴۹۲۰۰۰ کیلوگرم CO2 وارد هوا میشه! وحشتناکه مگه نه؟! خب این حداقل موضوع بود! حالا حساب کنید ببینید سرورهای توئیتر چقدر CO2 تولید میکنن!

این مقدار معادل اینه که با یک خودرو که در هر کیلومتر ۱۵۰ گرم CO2 تولید میکنه ، روزانه ۳٫۳ میلیون کیلومتر مسافت طی کنیم!

در تصویر زیر محاسبات رو انجام دادم که میتونید ببینید.

نمودار محاسبه میزان تولید CO2 توسط سایت توئیتر

این یک تخمین ساده از تنها یکی از سرویسهای این سایت بود. چه بسیارند وبسایتهایی که ما کاربران جامعه سایبر ، وقت و انرژی بسیار زیادی در اونها صرف میکنیم. اثرات جبران ناپذیر این موضوع رو مطمئنا میدونید…..

به امید روزی که همه از سرویسهای گرین ( Green ) استفاده کنیم و گازهای مخرب محیط زیست کمتری تولید کنیم. البته باید سعی کنیم تولید نکنیما!

موفق باشید.

آموزش طراحی وب - روز اول - آموزش HTML

طبق قولی که داده بودم ، آموزش طراحی وب رو از پایه شروع میکنم. خب یک سوالی که ممکنه توی ذهن خیلی ها بوجود بیاد اینه که برای طراحی وب از چه نرم‌افزارهایی استفاده میکنیم. من یک سری برنامه خدمتتون معرفی میکنم که اینهارو میتونید خیلی راحت گیر بیارید و نصب کنید. برای طراحی ظاهر سایتها معمولا از برنامه‌ی فوتوشاپ استفاده میکنیم. این نرم‌افزار خودش خدائی هست توی بحث گرافیک. حجمش بالاست و دانلودش کار راحتی نیست. توی خیلی از مجموعه های نرم افزاری موجود در بازار هم پیدا میشه. خب برای نوشتن کدهامون از برنامه های مختلفی میتونیم استفاده کنیم. به عنوان مثال برنامه هایی مثل دریم وی ایور ( Dreamweaver ) ، یا پی اچ پی دیزاینر و یا از همه ساده تر ، نُت پَد ۲ استفاده کنید. نُتپد دو خوبیش اینه که همه زبونهای برنامه نویسی رو پشتیبانی میکنه و جالبه که متن‌باز هست و فارسی هم هست! البته باید زبان فارسیش رو دانلود و نصب کنید. خیلی سادست. من همین رو پیشنهاد میکنم. خُب حالا میریم سره اصل مطلب.برای اینکه بتونیم وب‌سایت رو طراحی کنیم ، همونطور که قبلاً گفتم باید ابتدا زبان اچ تی ام ال ( HTML ) رو بلد باشیم. HTML خلاصه شده‌ی Hyper Text Markup Language هست. اچ تی ام ال یک زبان برنامه نویسی نیست. بلکه یک زبان نشانه گذاریست که از تگ‌ها به عنوان اجزای سازندش استفاده میکنه. یعنی مثلا از یک تگ ِ کاملا مشخص ، همیشه برای رسم جدول استفاده میکنیم ، یا از یک تگ مشخصه دیگه ، برای ایجاد فرم یا تیتر ، پاراگراف ، منوی آبشاری و …. استفاده میشه. با استفاده از اچ تی ام ال ، به وب سایتمون ساختار و شکل میدیم. میشه گفت دقیقا همون کاری رو میکنه که اسکلت یک ساختمون در حال ساخت انجام میده. انشالله توی متنهای بعدیم ، جلوتر میریم و میبینیم که چطور به این به اصطلاح اسکلت ، مما و رنگ و حالت میدیم. تگها در این زبان بین دو علامت قلاب مانند قرار میگیرن و معمولا به صورت جفت هستند. به مثالهای زیر توجه کنید:

<html></html>

<body></body>

<table></table>

<pre></pre>

<p></p>

<h1></h1>

همونطور کی میبینید ، همه‌ی این تگها ، به صورت جفتی آمدن. طریقه‌ی کار هم به این طورته که ما ابتدا تگ رو باز میکنیم   <p> و سپس میبندیمش<p/>. هرچیزی که بین این باز و بسته شدنه تگ قرار بگیره ، از چارچوبهایی که برای تگ تعریف شده تبعیت میکنه. تگها گاها میتونن تودرتو باشند. یعنی میتونیم در تگ p که بیانگر پاراگراف هست ، تگهایی برای تعریف تصویر ، تیتر ، جدول و … داشته باشم که ممکنه هرکدوم از اون تگها درونشون از تگهای دیگه ای بخوایم استفاده کنیم.

زمانی که یک صفحه وب رو طراحی میکنیم ، ابتدا باید به مرورگری که میخواد این صفحه رو به نمایش در بیاره ، بگیم که از چه زبان نشانه گذاری استفاده کردیم ، چه نسخه ای از اون زبان و یک سری اطلاعات جانبی دیگه که به مرور زمان یاد خواهیم گرفت. همونطور که در کدهای پائین میبینید ، ما در خط اول به مرورگر میگیم که داریم از زبان HTML نسخه‌ی ۴٫۰۱ استفاده میکنیم. نترسید. لازم نیست اینها رو به خاطر بسپرید. اگر از برنامه هایی مثل دریم وی ایور استفاده کنید ، وقتی یک سند جدید HTML بوجود میارید ، بسیاری از کدهایی که نیازهست رو خودش از قبل براتون نوشته. من نمونه هایی رو جهت معرفی در پائینه متن آوردم. ببینید:
برای HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

برای HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

برای HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

خب صفحات اچ تی ام ل رو با تگ HTML شروع میکنیم. و توی اون ، دو بخش اصلی و اساسی داریم. بخش اول مربوط به مرورگر و اعضای بسیار مهمی میشه که با تگ head تعریفش میکنیم. در این بخش ، اطلاعاتی مانند عنوان سایت رو قرار میدیم. بخش دوم که با تگ body تعریف میشه ، محتوائی هست که در صفحه ی مرورگر کاربران به نمایش در خواهد آمد. برای شروع یک پوشه توی کامپیوتر محترمتون درست کنید که از این به بعد ، توی این پوشه تستهامون رو انجام بدیم. یادمون باشه که فایلهای اچ تی ام ال رو با پسوند html ذخیره میکنیم. مثلا index.html یا web.html یا هر اسمی که دلتون میخواد ؛ اما با پسوند html !

فایلی با این نام درست کردم: index.html کدهای زیر رو که توضیحاتی دربارشون خواهم داد درونش کپی کنید و ذخیره کنید. سپس روی فایل دوبار کلیک کنید و خواهید دید که فایل با مرورگرتون ( اینترنت اکسپلورر یا فایرفاکس یا … ) باز خواهد شد.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>عنوان سایت</title>

</head>

 <body>

 <h1>عنوان متن شماره یک</h1>

<p>اولین پاراگراف من در وب</p>

 </body>

</html>

در خط شماره یک ، همونطری که قبلا هم گفتیم ، باید داکتایپ مناسبی ارائه بدیم. در خط دوم ، با تگ html ، شروع کردیم. یعنی داریم همونطور که توی داکتایپ گفتیم که میخوایم html بنویسیم ، حالا هم شروعش کردیم. در خط چهارم ، تگ head رو باز کردیم و در خط هشتم بستیمش. بین این تگ ، عنوان سایت رو با تگی به نام title آوردیم. توی خط دهم تگ body رو شروع و در خط هجدهم بستیمش. میبینیم که بین این تگ ، ما از دو تا تگ h1 و p استفاده کردیم. تگ h1 بیانگر مهمترین عنوان متن ما هست و p تشکیل دهنده‌ی یک پاراگراف. تگ h1 که برگرفته از headline 1 هست ، مهمترین عنوان در صفحه رو تشکیل میده. ما میتونیم به کرات از این تگ استفده کنیم. ولی برای عنوانهایی که اهمیت اونها کمتر از بقیه عنوانهاست ، میتونیم از تگهای h2 یا h3 استفاده کنیم.

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

<a href="http://www.activemind.ir">این یک لینک است</a>

<a title="نمایش متن وقتی که موس روی لینک قرار میگیرد" href="http://www.activemind.ir">این یک لینک است</a>

<a target="_self" href="http://www.activemind.ir">این یک لینک است</a>
در این لینک وقتی روی اون کلیک میشه ، همین صفحه رو به صفحه جدید منتقل میکنه

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

عناوین
<h1>This is a heading</h1>
 <h2>This is a heading</h2>
<h3>This is a heading</h3>

پاراگراف
<p>This is a paragraph</p>
<p>This is another paragraph</p>

استفاده از افزونه ها در المنتها
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>

درج تصویر
<img src="url" alt="some_text"/>

رسم جدول
<table border="1">
 <tr>
 <td>ردیف اول ، سلول اول</td>
 <td>ردیف اول ، سلول دوم</td>
 </tr>
 <tr>
 <td>ردیف دوم ، سلول اول</td>
 <td>ردیف دوم ، سلول دوم</td>
 </tr>
 </table>

لیستهای شماره دار
<ul>
 <li>محمد رشیدی</li>
 <li>سعید اسماعیلی‌فرد</li>(این نام مشمول قانون کپی رایت است )
 </ul>

لیستهای بدون شماره
<ol>
 <li>محمد رشیدی</li>
 <li>سعید اسماعیلی‌فرد</li> (این نام مشمول قانون کپی رایت است )
 </ol>

فرم و اجزای آن:
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50"  />
 <input type="password" />
 <input type="checkbox" checked="checked" />
 <input type="radio" checked="checked" />
 <input type="submit" value="Send" />
 <input type="reset" />
 <input type="hidden" />

 <select>
 <option>Apples</option>
 <option selected="selected">Bananas</option>
 <option>Cherries</option>
 </select>

<textarea name="comment" rows="60" cols="20"></textarea>

 </form>

خب از این المنتها ، با توجه به توضیحاتی که دادم ، میتونید توی تگ body استفاده کنید. برای اینکه این موضوع ملموستر بشه ، لطفا کدها رو بین دو تا تگ Body قرار بدید و پس از ذخیره کردنش ، با مرورگرتون ببینید که چه چیزی تولید شده. فعلا با همین تمرین هایی داشته باشید. اگر هم سوالی بود بنده در خدمتم. توی نظرات بپرسید. انشالله جلسه بعدی زبان xhtml رو شروع میکنیم. چون کلا ما این زبان html رو آموزش دادیم که شما با زیرساختها آشنا بشید.

موفق و پایدار باشید.
با احترام ، محمد رشیدی