بایگانیِ دستهٔ ‘برنامه نویسی و توسعه وب’

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

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

زمان تخمینی من برای مطالعه منابع گفته شده چیزی بین 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

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

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

(بیشتر…)

Advertisements

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

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

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

<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>

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

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

(بیشتر…)

با توجه به نیاز روز افزون علاقه مندان حوزه طراحی وب در ایران به وجود خودآموزهای مرتبط و خلاء چنین خودآموزهایی در وب فارسی، تصمیم گرفتم تا به کمک چند تن از دوستانم کتابچه ای الکترونیکی و رایگان موسوم به خودآموز طراحی وب به صورت عملی را تدوین کنم. در این کتاب 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 تست شده و موردی و مشکلی در اون دیده نشده. همینجا جا دار از دوستانی که در حین ساخت برنامه با من برای تست همکاری کردن تشکر کنم. از آقایان سپهر قربانی، محمد اعظم رحمانی، امیل بدل و خانم مژگان شهریاری. لطفا در صورت بروز مشکل ورژن اندروید و مدل گوشی خودتون رو در بخش نظرات برای بنده ارسال کنید.

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

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