برنامه نویسی و توسعه وب

برای یادگیری طراحی و توسعه وب از کجا شروع کنم؟

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

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

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

تفاوت طراحی وب با توسعه وب

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

برای مشاهده اینفوگرافیک در سایز اصلی کلیک کنید
برای مشاهده اینفوگرافیک در سایز اصلی کلیک کنید

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

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

بخش اول – طراحی وب

گام اول – فراگیری HTML/CSS با کتاب Build Your Own Website The Right Way

با مطالعه این کتاب شما به خوبی با اصول HTML آشنا خواهید شد و در ادامه مباحث CSS به روند آموزشی با مثال های عملی اضاف خواهد شد. این کتاب کاملا مناسب افراد مبتدی است و مسائل رو با بیانی شیوا و روان برای مخاطب خودش بیان می کنه. در خاتمه کتاب شما تا سطح متوسط بالا خواهید اومد و توانمندی انجام کارهای خوبی رو خواهید داشت.

کتاب Build Your Own Website The Right Way
کتاب Build Your Own Website The Right Way

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

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

برای یادگیری طراحی و توسعه وب از کجا شروع کنم؟ بیشتر بخوانید »

روش ساخت منوی پایین افتادنی با کمک CSS3

دشواری : مبتدی
زمان تکمیل آموزش : 20 دقیقه
منبع اصلی آموزش به زبان انگلیسی : http://designmodo.com/css3-dropdown-menu
مترجم و تهیه کننده مطلب : حمید رضا کاظمی – www.hamidoffice.com

مرحله ی اول – کدنویسی HTML

ما در ابتدا یک unordered list همراه آیتم های آن و تگ لینک خواهیم ساخت . برای ساخت زیر منو یا همان Sub Menu در درون لیست خود یک unordered list خواهیم نوشت.

[sourcecode language=”html”]
<ul class="menu">
<li><a href="#">My dashboard</a></li>
<li><a href="#">Likes</a></li>
<li><a href="#">Views</a>
<ul>
<li><a href="#" class="documents">Documents</a></li>
<li><a href="#" class="messages">Messages</a></li>
<li><a href="#" class="signout">Sign Out</a></li>
</ul>

</li>
<li><a href="#">Uploads</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Documents</a></li>
</ul>
[/sourcecode]

نتیجه ی کار تا اینجا به صورت زیر می باشد :

تصویر شماره یک

روش ساخت منوی پایین افتادنی با کمک CSS3 بیشتر بخوانید »

کتاب خودآموز طراحی وب به صورت عملی به زبان فارسی و رایگان

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

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

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

مخاطبان اصلی این کتاب افراد مبتدی و در سطح میانه هستند که با مباحث HTML/CSS آشنا بوده و می خواهند مهارت های طراحی وب خود را بهبود بخشیده و به صورت عملی با بخشی از این صنعت پویا و جذاب آشنا شوند. برای مطالعه این کتاب نیاز به نصب نرم افزار فوتوشاپ و همچنین یک ویراستار کد (Code Editor) دارید. پیشنهاد من در مورد ویراستار، نرم افزار رایگان و محبوب ++Notepad است.

حق نشر (Copyright)

این اثر بر اساس مجوز Creative Commons Attributions-Noncommercial-ShareAlike منتشر شده و این مجوز به این معناست که مادامیکه  قصد فروش این اثر به دیگران را نداشته باشید مجاز به انجام هر گونه تغییر و افزودن محتوا به آن هستید و می توانید آن را با دیگران به اشتراک بگذارید.

دانلود کتاب

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

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

سایر کتاب های رایگان منتشر شده

کتاب راهنمای برپاسازی وردپرس چندکاربره به زبان فارسی
دانلود کتاب رایگان امنیت وردپرس به زبان فارسی
دانلود مرجع کامل برنامه MMB به زبان فارسی
دانلود راهنمای استفاده از وردپرس

کتاب خودآموز طراحی وب به صورت عملی به زبان فارسی و رایگان بیشتر بخوانید »

برنامه ساخت و ارسال کارت ویزیت پیامکی برای گوشی های اندرویدی!

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

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

صفحه وارد سازی اطلاعات
صفحه وارد سازی اطلاعات

صفحه آغازین برنامه

ارسال کارت به شماره مد نظر

فهرست کارت های ساخته شده جهت ارسال

این برنامه با گوشی های HTC Hero، Xperia Mini Pro و Samsung Galaxy S II تست شده و موردی و مشکلی در اون دیده نشده. همینجا جا دار از دوستانی که در حین ساخت برنامه با من برای تست همکاری کردن تشکر کنم. از آقایان سپهر قربانی، محمد اعظم رحمانی، امیل بدل و خانم مژگان شهریاری. لطفا در صورت بروز مشکل ورژن اندروید و مدل گوشی خودتون رو در بخش نظرات برای بنده ارسال کنید.

دانلود برنامه برای گوشی های اندرویدی

دانلود برنامه از سرور کمکی

برنامه ساخت و ارسال کارت ویزیت پیامکی برای گوشی های اندرویدی! بیشتر بخوانید »

ابهام در علت بازنشدن برخي سايت‌ها و غیبت پرتغال فروش!

 اخیرا در خبرها داشتیم که حضرات مسئول مدعی شدند که بازنشدن برخی سایت ها به دلیل کندی اینترنت و خدای نکرده افت سرعت نیست و شما موظف هستید که انگشت اتهام رو به سوی پرتغال فروش یا ارائه دهنده آب پرتغال نشانه بگیرید!

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

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

خب خیلی طبیعی هست که سرورهایی که در بالا ازشون یاد کردیم باید از قدرت قابل توجه و مناسبی برخوردار باشن و از نظر جغرافیایی طوری در دنیا توزیع شده باشند که باعث کاهش درخواست های بارگذاری بشن تا به همین نسبت سرعت بارگذاری صفحات وب افزایش پیدا کنه. در همین راستا CDN های زیادی در سراسر دنیا ظهور کردند. برخی از اینها به صورت رایگان سرویس دهی می کنند و برخی دیگر با پرداخت هزینه. یکی از معروف ترین CDN های رایگان دنیا که عمدتا برای میزبانی کتابخانه های جاوا اسکریپتی مثل jQuery ازش استفاده میشه همین گوگل خودمون هست. خیلی از بر و بکس طراح و توسعه دهند وب به خاطر شاخصه های گوگل ترجیح میدن تا اون رو انتخاب کنن. گوگل خان و رفقا هم واسه اینکه سرویس استانداردی رو ارائه بدن یک حرف S به نشان استاندارد [1] ضمیمه HTTP می کنند تا بشه HTTPS و خیالمون خوش باشه که بعله آقا جان ما حرفه ای هستیم دیگه. برو اون ور بذار باد بیاد.

خلاصه ما واسه اینکه برای کاربرای وب سایتمون تجربه بهتری رو خلق کنیم و از کورس رقابت عقب نیفتیم و استانداردهای روز وب رو رعایت کرده باشیم از کلی شی، ابزار و ویژگی هایی بهره می گیرم که همشون بر پایه یه سری کتابخانه قدرتمند و مشهور جاوا اسکریپتی مثل jQuery , Mootools و Prototype بنا شدن. مثلا ما میایم و اون بالای صفحه وب که داریم کدش رو می نویسم یه چیزی مثل این می ذاریم:

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js

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

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

اندوهی جانکاه که جزئی از زندگی روزمره ماست

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

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

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

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

______________________________________

پی نوشت 1: اون بالا که گفتم S به نشان استاندارد هست به دلیل اقتضای نوشته بود و این S ابتدای کلمه Secure هست و من خواستم از صنعت کنایه و استعاره که تو مدرسه یادمون دادن بهره گیری کنم.

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

ابهام در علت بازنشدن برخي سايت‌ها و غیبت پرتغال فروش! بیشتر بخوانید »