چرا تیم وب یار با این همه مشغله و سفارشات و مشتریان و کارآموزان … باز هم برای علاقه مندان دوره یادگیری طراحی سایت برگزار می کند؟
نظر مدیر مجموعه وب یار:
با توجه به افزایش فارغ التحصیلانی که با در دست گرفتن یک برگه به نام مدرک مهندسی ،خود را مهندس کامپیوتر می دانند و تمام بهانه آنها برای دانش بسیار ناچیزی که دارند این است که “در دانشگاه چیزی به آدم یاد نمی دهند” بر آن شدیم تا این بهانه را از آنها گرفته و حال که به فکر حرکتی نو افتاده اند و قدم اول را برداشته اند آنها را در دوره ای جامع و کامل طراحی سایت و سئوی سایت برای ورود به دنیای تکنولوژی وب با آموزش و مشاوره ، همراهی کنیم.
لطفا جهت تکمیل فرم ثبت نام در کلاس آموزش طراحی سایت از زبان فارسی استفاده نمایید.
“چون به این جمله ایمان داریم که زکات علممان نشر آن است”
کلاس طراحی سایت اختصاصی وردپرس از صفر تا صد واقعی شروع از 1 آبان
تمام کسانی که یک بار در زندگی خود طراحی سایت را امتحان کردند متفق القول با این جمله موافق اند که :
“طراحی سایت یک مسیر پیچیده و دشوار را به دنبال دارد”
اما مجموعه طراحی سایت وب یار یک دوره ویژه طراحی و برنامه نویسی سایت های وردپرسی را برگزار کرده تا بسیاری از این دشواری ها و پیچ و خم های مسیر را برای شما کاهش دهد.
بهانه های ورود به بازار کار:
1- توی دانشگاه به ما چیزی یاد ندادند که…
اتفاقا یکی از دلایلی که این کلاس ها تشکیل شده همین جمله می باشد. اکثر کسانی که برای دوره ی کارآموزی به مجموعه وب یار مراجعه می کنند این جمله را در روز مصاحبه به ما میگویند. که این مسئله بدون راه حل نیست.
2- ریاضیم ضعیفه نمیتونم دوره طراحی سایت شرکت کنم.
یکی دیگر از باور های غلط در دنیای برنامه نویسی همین مورد می باشد. به استثنای چند شاخه نظیر هوش مصنوعی ، ماشین لرنینگ و مواردی از این قبیل باقی شاخه های برنامه نویسی به بیشتر از چهار عمل اصلی احتیاج ندارد.
3- به زبان انگلیسی مسلط نیستم.
-زبان انگلیسی در دنیای برنامه نویسی در هر شاخه ای چه وب چه هوش مصنوعی یک امتیاز محسوب می شود. بلد بودن زبان انگلیسی می تواند منابع گسترده تر و رایگانی را در اختیار شما بگذارد. اما بدون بلد بودن زبان انگلیسی هم می شود برنامه نویس شد.
اما با گذشت زمان علاقه شما به یادگیری زبان بیشتر خواهد شد.
ما در دوره طراحی سایت وب یار چه چیزهایی یاد میگیریم؟
ما در دوره طراحی سایت وب یار از صفر کار کردن با کامپیوتر تا کد نویسی سایت های فروشگاهی را با هم یاد میگیریم. هم اکنون سرفصل های دوره را با هم بررسی می کنیم.
- آشنایی با مبانی کامپیوتر
- تحلیل وب سایت ها و پیدا کردن نیاز مشتری
- وایر فریمینگ
- طراحی UI
- دیزاین کردن یک سایت شرکتی
- برنامه نویسی استاتیک نظیر HTML/CSS
- فریم ورک بوت استرپ
- استاتیک یک سایت شرکتی
- آموزش نصب وردپرس و مدیریت یک سایت
- پی اچ پی برای کد نویسی وردپرس
- تبدیل قالب استاتیک به داینامیک سایت شرکتی html to wp
- افزودن فروشگاه به قالب شرکتی
- بهینه سازی پوسته های وردپرسی
اکنون سرفصل ها را یکی یکی بررسی میکنیم.
آشنایی با مبانی کامپیوتر
برای یادگیری کامپیوتر باید یک سری مفاهیم را بلد باشید در جلسه ابتدایی دوره سعی میکنیم تا با هم این مفاهیم را بررسی و یاد بگیریم این مفاهیم عبارتند از:
1.اینترنت چیست؟ (what is Internet)
- سرور چیست؟ (what is Server)
- هاست چیست؟ (what is Host)
- دامین چیست؟ (what is Domain)
- زون چیست؟ (what is Zone)
- لینک چیست؟ (what is Link)
- آی پی چیست؟ (what is IP)
- مرورگر چیست؟ (what is Browser)
- ایمیل چیست؟ (what is eMail)
- برنامه نویسی استاتیک (Static Programming)
- برنامه نویسی داینامیک (Dynamic Programming)
- زبان HTML و CSS چیست؟ (what are HTML and CSS)
- مقایسه ویندوز و لینوکس (Comparison Windows with Linux)
- زبان پی اچ پی و زبان ای اس پی کدام است؟ (what are PHP and ASP)
- معرفی وب سرور Apache و IIS
تحلیل وب سایت ها و پیدا کردن نیاز مشتری
قبل از طراحی یک سایت ما باید نیاز مشتری را تحلیل کنیم.باید جامعه هدف مشتری را شناخته و با توجه به جامعه هدف مشتری سلسله مراتب سایت را به گونه ای بچینیم که منجر به خرید یا تماس از جانب مشتری ها شود. یک سری سرفصل ها در ادامه برای شما عنوان می شود که در طول دوره با هم بررسی می کنیم
- معرفی ساختار و اجزای وب سایت؟
- تحلیل نیاز مشتری
- معرفی و آموزش اجزای ثابت در وب سایت از قبیل هدر و فوتر و سایدبار و منو
- چگونه باید یک سایت طراحی کنیم که منجر به فروش و یا افزایش فروش مشتری شود؟
- ریدیزاین چیست؟
- تحلیل سه وب سایت شرکتی و تلاش برای ریدیزاین این وب سایت ها
هر چند مبحث تحلیل سایت خود یک فرایند پیچیده تر برای یادگیری دارد اما در این دوره در حد نیاز به شما آموزش خواهیم داد.
وایر فریمینگ
تا به حال ما با ابزار های طراحی رسایت آنچنان سر و کار نداشتیم. اما در ادامه بیشتر با این ابزار ها سروکار داریم. تا به حال ما با مقدمات وب آشنا شدیم اما اکنون می خواهیم اولین مرحله اصلی از پروسه طراحی سایت را پشت سر بگذاریم . وایرفریمینگ در لغت به معنی یک چارچوب برای نمایش می باشد.
کشیدن وایرفریم چه کمکی به ما میکند؟
اوایل کار طراحی سایت بودم که برای یک مشتری 5 بار سایتش رو از اول کدنویسی کردم و کار اذیت کننده ای بود برام و بالاخره توی بار 5 ام پروژه تایید نهایی و تحویل داده شد. اون موقع اگر من بلد بودم وایرفریم بکشم نهایتا چند تا مستطیل یا شکل دیگه به پروژه اضافه میکردم. یا بخش های مختلف یک سایت رو جا به جا میکردم. در واقع وایر فریمینگ یک جزء جدا نشدنی از فرایند طراحی سایت می باشد. در صورت نکشیدن وایرفریم هر بار باید سایت رو کد نویسی کنید تا آماده تحویل به مشتری بشه که آیا این پروژه رو از شما بپذیرد یا رد کند.
- معرفی وایرفریم (Wireframe)
- تمرین وایر فریم
- آموزش وایر فریم آنلاین
- رابط کاربری UI و تجربه کاربری UX
- فایل های style – page – single – index
- رسم وایرفریم سایت آموزشی در کلاس
- طراحی UI
بعد از تحویل وایرفریم و تایید توسط مشتری لازم است تا رنگ سازمانی عکس ها و متون مشتری به طرح اضافه شود.این کار باعث میشود تا مشتری شکل واقعی سایت خود را قبل از کدنویسی ببیند و تایید کند. تا از دوباره کاری جلوگیری شود. سرفصل های این بخش را در زیر خواهید دید.
- 1. کانفیگ فتوشاپ
2.طراحی وایرفریم در محیط فتوشاپ
- آموزش سایزها و استاندارد سایز
- معرفی رنگ ها و استاندارد رنگ در مبحث روانشناسی رنگ ها
- فونت ها و استاندارد فونت در طراحی وب
- فونت های وب
- معرفی اجزای سایت . آیکن ها . فونت ها . تصاویر متون . تیترها . ریبون ها . منو ها . فیلدها
- آشنایی کامل با ابزارها در فتوشاپ برای طراحی سایت
- آموزش افکت ها در فتوشاپ
- آموزش اف ایکس ها FX در فتوشاپ
- کد رنگ ، استاندارد های رنگ مادر- فرزند
- آموزش پالت رنگ ها و انتخاب از میان آنها
- رسم تمام اجزای سایت اجزای هدر . فوتر . سایدبار . کانتنت . پست پیج در فتوشاپ
- اسلایس بخش های مختلف و شروع به تبدیل سایت
- آموزش ذخیره سازی تصاویر با پسوند jpg . png . gif . svg و تفاوت میان آن ها در طراحی وب سایت
- آموزش مقدماتی فیگما
دیزاین کردن یک سایت شرکتی
در این مرحله شما با دانشی که تا اینجا کسب کرده اید یک مینی پروژه از 0 نیازسنجی تا طراحی پیش میبرید. و همزمان در کلاس نیز یک پروژه طراحی خواهد شد تا به همه چیز مسلط شوید.
برنامه نویسی استاتیک نظیر HTML/CSS
برنامه نویسی استاتیک ، برای تبدیل گرافیک طراحی شده در بخش قبل یک صفحه وب سایت احتیاج است تا شما زبان های نشانه گذاری html و سی اس اس را یاد بگیرید. ما سرفصل های آماده کردیم تا در سریع ترین حالت ممکن این مباحث را یاد بگیرید. البته به این نکته توجه داشته باشید که شما هر جلسه باید داکیومنت و رفرنس های مختلف را برای یادگیری موضوعات جلسات قبلی بخوانید.
سر فصل های این بخش عبارتند از:
- معرفی و توضیح مدل برنامه نویسی استاتیک
- معرفی و آشنایی با زبان ها و کتابخانه های برنامه نویسی فرانت اند (Html,CSS,JavaScript,Bootstrap)
- آموزش چارچوب و قواعد اولیه برنامه نویسی HTML
- آموزش تگ های پرکاربرد در HTML
- طراحی یک صفحه وب ساده با HTML
- استفاده از ویژگی ها (Attribute) در HTML
- آموزش امکانات اولیه CSS و نحوه اتصال به کد های HTML
- آموزش کد نویسی با استفاده از CSS
- معرفی استایل ها و کاربرد آنها در HTML
- طراحی یک صفحه وب با استفاده از HTML و CSS
سرفصل های HTML:
Head .1
Link relltype .2
Meta .3
Keywords – description – author .4
- meta http-equiv
Title .6
Body .7
Div id .8
Div class .9
- < ! – help — >
- / * help * /
Style .12
H1- H6 .13
P .14
Pre .15
- “a id=” tips
- <a heref=” #tips”></a>
- a heref
Img .19
Br .20
Hr .21
Strong .22
Span .23
Li & ul .24
Form .25
- <“input type = “ text “ name = “ male >
27.<input type = “ checkbox” name= “vehic “ value = “ bike “ >I have a bike <br>
- <“input type = “ submit “ value = “ submit >
- <table> < tr> <td>
30.تگ های فرمت بندی شامل <b>، <i>، <del>، <sub>، <mark> مدل های رنگ دهی RGB , HEX, HSL
سرفصل های CSS :
Style .css .1
- انتخابگرها :کلاس و آی دی ، تگ های تو در تو
Tags .3
P , a , img , #id , .class, b#strong .4
Address .5
Blockquote .6 نقل از دیگران
Width .7
Height .8
Float .9
Background .10
Font .11
Margin .12
Padding .13
List .14
Display .15
Clear .16
Border .17
Background .18
Font .19
Margin .20
Padding .21
List .22
Display .23
Clear .24
Border .25
Text – align .26
- :hover
Text – decoration .28
z- index .29
position .30
css- reset .31
css- sprite .32
direction .33
p:first-line .34
first- child: .35
- فاصله میان حروف( letter – spacing )
- فاصله میان لغات ( word – spacing )
- ظاهر متن ( text – spacing )
- تراز عمودی ( vertical – align )
- ارتفاع خط ( line – height )
P:: first-letter .41.
- :: before
- :: after
فریم ورک بوت استرپ
فریم ورک چیست؟ چرا به بوت استرپ احتیاج داریم؟ همه این ها در بخش بوت استرپ به طور کامل برای شما تشریح خواهند شد. به سر فصل های این بخش نیم نگاهی داشته باشید:
- آموزش توابع کتابخانه ای در Bootstrap
- کامپوننت های آماده دربوت استرپ
- تفاوت تیلویند و بوت استرپ
- برتری های تیلویند و بوت استرپ و نقاط ضعف هر دو
- یوتیلیتی بیس با کامپوننت بیس چه فرقی دارن؟
- اتصال بوت استرپ به HTML
کد نویسی استاتیک یک سایت شرکتی
در این مرحله شما با دانشی که تا اینجا کسب کرده اید یک مینی پروژه از طراحی تا کد نویسی پیش می برید. و همزمان در کلاس نیز یک پروژه طراحی خواهد شد تا به همه چیز مسلط شوید.
آموزش نصب وردپرس و مدیریت یک سایت
در این مرحله ابتدا با CMS وردپرس آشنا می شوید.به ترتیب موارد زیر را یاد خواهید گرفت.
- نصب یک محیط توسعه پی اچ پی XAMPP
- نصب وردپرس
- آموزش کار با پنل وردپرس
- نصب پوسته
- نصب افزونه
- معرفی افزونه های پر کاربرد
پی اچ پی برای کد نویسی وردپرس
در این بخش وقتی متوجه شدید که وردپرس چجوری کار میکند به سراغ مقدمات کار زبان پی اچ پی من جمله:
- تعریف متغیر در پی اچ پی
- تعریف گلوبال
- تعریف شروط در پی اچ پی
- تعریف حلقه ها
- تابع
- متد
تبدیل قالب استاتیک به داینامیک سایت شرکتی html to wp
در این مرحله یک سری از چندین هزار تابع وردپرس رو یاد می گیریم که به کمک آن ها قالب استاتیک خود را به پنل وردپرس وصل میکنیم. در این بخش می پردازیم به:
index.php .1
Style.css .2
Screenshot.png .3
Header.php .4
Side-bar.php .5
Footer.php .6
Single.php .7
Functions.php .8
Comment.php .9
Seo .10
Secure .11
Contact us .12
forms .13
- 404.php
15.category
16.archive
17.tag
18.author
افزودن فروشگاه به قالب شرکتی
پس از وصل شدن به پنل وردپرس قالب خود را با افزونه ووکامرس سازگار کرده و یک فروشگاه اختصاصی طراحی خواهیم کرد.
- طراحی صفحه فروشگاه
- طراحی صفحه تک محصول
- اصلاح صفحه سبد خرید
- اصلاح صفحه ورود و ثبت نام
- ویرایش صفحه تسویه حساب
- وصل کردن درگاه پرداخت زرین پال به سایت
بهینه سازی پوسته های وردپرسی
تا به حال از برناتمه نویسی پوسته های وردپرسی گفتیم. اما یک بخشی از کار راحتی کاربر در استفاده از وب سایت می باشد. در این بخش یک مقدماتی از بهینه سازی سایت را برای شما توضیح خواهیم داد.موضوعات این سرفصل عبارتند از:
- کار با افزونه های کش
- استفاده از پریلودر ها
- آشنایی با لیزی لودینگ
- بهینه سازی تصاویر
- بهینه سازی ویدیو ها
- استفاده از پکیج باندلر ها و کم حجم کردن جاوا اسکریپت های وب سایت
در آخر اگر مایل به شرکت در این کلاس ها هستید لطفا با پشتیبانی سایت صحبت کنید تا در صورت نیاز به راهنمایی شما را راهنمایی کنند.