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

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

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

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

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

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

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

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

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

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

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

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

کتاب Build Your Own Website The Right Way

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

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

نوشته های فرضی برای وردپرس کاران

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

نمایی از نوشته های فرضی در عمل

بر همین اساس من یک سری مطلب فرضی تولید کردم و از بخش ابزارها > برون ریزی در پنل مدیرت وردپرس اقدام به تهیه یک نسخه پشتیبان از اون ها کردم و برای دانلود برای شما دوستان آماده کردم. این بسته شامل ویژگی های زیر است:

– این بسته با نسخه 3.4.2 وردپرس تهیه شده.
– مطالب شامل شش دسته فرضی است که یکی از دسته ها دارای 2 زیر دسته است.
– 5 نوشته با طول کافی به زبان فارسی درج شده است. این مطالب دارای عکس نیز می باشند.
– 2 مورد از مطالب دارای دیدگاه می باشند.
– تمامی نوشته دارای برچسب (Tag) هستند.
– یک برگه فرضی نیز ایجاد شده است.

دو فایل xml در بسته وجود داره که یکی برای نوشته ها است و دیگری برای برگه. اسم فایل ها گویا است. ضمن اینکه تصاویر بکار رفته در نوشته به صورت جداگانه در پوشه Image در بسته موجود هستند. برای وارد سازی کافیست از پنل مدیریت ورد پرس به بخش ابزارها > درون ریزی برید.

دانلود بسته

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

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

پی نوشت:

یک سرویس تحت وب فارسی برای تولید مطالب فرضی و تصادفی هم وجود داره که توسط فرشاد ذوالفقاری تهیه شده که می تونید از اون هم استفاده کنید.

مطالب مرتبط:

• کتاب رایگان امنیت وردپرس
• کتاب برپاسازی وردپرس چندکاربره به زبان فارسی
• کتاب طراحی وب به صورت گام به گام

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

دشواری : مبتدی
زمان تکمیل آموزش : 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>

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

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

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

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

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

بعد از مطالعه این کتاب شما قادر خواهید بود پوسته ای با امکانات زیر بسازید:

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

حق نشر (Copyright)

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

دانلود کتاب

مطالب مرتبط:

• کتاب رایگان امنیت وردپرس
• کتاب برپاسازی وردپرس چندکاربره به زبان فارسی
• کتاب طراحی وب به صورت گام به گام